利用css实现边框切角效果

.out-rect {

margin-top: 30px;

display: flex;

align-items: center;

justify-content: center;

width: 200px;

height: 200px;

padding: 5px;

background: linear-gradient(-45deg, transparent 10px, #58a 0) bottom right,

            linear-gradient(45deg, transparent 10px, #58a 0) bottom left,

            linear-gradient(135deg, transparent 10px, #58a 0) top left,

            linear-gradient(-135deg, transparent 10px, #58a 0) top right;   

background-size: 50% 50%;

background-repeat: no-repeat;

}

.in-rect{

width: 100%;

height: 100%;

background: linear-gradient(-45deg, transparent 8px, #fff 0) bottom right,

            linear-gradient(45deg, transparent 8px, #fff 0) bottom left,

            linear-gradient(135deg, transparent 8px, #fff 0) top left,

            linear-gradient(-135deg, transparent 8px, #fff 0) top right;

background-size: 50% 50%;

background-repeat: no-repeat;

}

 

  

    <div class="out-rect">

        <div class="in-rect"></div>

     </div>

效果图：四个边框显示缺角

两个缺角矩形叠加的效果，内部矩形宽高跟随父div大小，只要保持垂直居中就好，padding的值为最终呈现的边框的宽度　

在超过一个切角的效果的时候，就需使用css3的background应用多层背景的特性来完成多重渐变，从而实现多个切角，并且要确保背景不得重复（background-repeat），划分每个背景图片的大小（background-size）。

利用角度确定切角形成的角度大小，利用transparent后面的值，确定切角形成的形状大小，利用left,right, top, bottom确定切角在每一个切片区的位置。