clip-path,比如对于DOM结构:
<div class="container">
<div class="box"></div>
</div>
让box右下角缺角25px并且不遮挡container:
.container {
background: green;
width: 200px;
height: 200px;
}
.box {
background: yellow;
width: 150px;
height: 100px;
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 25px), calc(100% - 25px) 100%, 0 100%);
}
效果:
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…