1.使用渐变
因为渐变可以接受一个角度，比如45deg作为方向，而且色标的位置信息也可以是绝对的长度值，不受容器尺寸的影响。把一个透明色标放在切角处，然后在相同位置设置另一个色标，并且颜色设置为想要的背景色。
4个切角，写几个 linear-gradient就是几个切角
div{
width:300px;
height: 200px;
background-color: #58a;/*回退机制*/
background:
linear-gradient(-45deg, transparent 15px, #58a 0) bottom right,
linear-gradient(45deg, transparent 15px, #58a 0) bottom left,
linear-gradient(-135deg, transparent 15px, #58a 0) top right,
linear-gradient(135deg, transparent 15px, #58a 0) top left;
background-size: 50% 50%;
background-repeat: no-repeat;
}
2.使用clip-path
div{
width:300px;
height:200px;
background: #58a;
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);
}
3.使用corner-shape
div{
width:300px;
height:200px;
background: #58a;
corner-shape:bevel;
border-radius:10% / 30px;
width:400px;
height: 300px;
}
注：目前此方法还在测试中，还没有浏览器支持
【弧形切角（内凹圆角）】
div{
width:300px;
height:200px;
background-color: #58a;/*回退机制*/
background:
radial-gradient(circle at top left, transparent 15px, #58a 0) top left,
radial-gradient(circle at top right, transparent 15px, #58a 0) top right,
radial-gradient(circle at bottom right, transparent 15px, #58a 0) bottom right,
radial-gradient(circle at bottom left, transparent 15px, #58a 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
}
