.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确定切角在每一个切片区的位置。