純css切角邊框

.cut-border {

  width: 400px;

  height: 300px;

  border: solid 1px #334995;

  box-shadow: 0px 0px 14px 1px #173C90 inset;

  clip-path: polygon(20px 0, calc(100% - 20px) 0,

​    100% 20px, 100% calc(100% - 20px),

​    calc(100% - 20px) 100%, 20px 100%,

​    0 calc(100% - 20px), 0 20px);

  background: linear-gradient(-45deg, #334995 14px, rgba(0, 0, 0, 0.05) 0) bottom right,

   linear-gradient(45deg, #334995 14px, rgba(0, 0, 0, 0.05) 0) bottom left,

   linear-gradient(135deg, #334995 14px, rgba(0, 0, 0, 0.05) 0) top left,

   linear-gradient(-135deg, #334995 14px, rgba(0, 0, 0, 0.05) 0) top right;

  // background-size: 50% 51%;

  background-repeat: no-repeat;

}

 效果如圖：