css 切角效果 |多个css文件引用

/*实现左上角切角效果*/
.cut-corner {
width: 200px;
height: 100px;
border-top-left-radius: 30px;
background-color: #eee;
}
.cut-corner:before {
content: "";
display: block;
position: absolute;
top: 0px;
left: 0px;
width: 0;
height: 0;
border-top: 30px solid #eee;
border-right: 30px solid transparent;
}
/*实现右上角切角效果*/
.cut-corner-right {
width: 200px;
height: 100px;
border-top-right-radius: 30px;
background-color: #eee;
}
.cut-corner-right:before {
content: "";
display: block;
position: absolute;
top: 0px;
right: 0px;
width: 0;
height: 0;
border-top: 30px solid #eee;
border-left: 30px solid transparent;
}
/*实现左下角切角效果*/
.cut-corner-bottom {
width: 200px;
height: 100px;
border-bottom-left-radius: 30px;
background-color: #eee;
}
.cut-corner-bottom:before {
content: "";
display: block;
position: absolute;
bottom: 0px;
left: 0px;
width: 0;
height: 0;
border-bottom: 30px solid #eee;
border-right: 30px solid transparent;
}
/*实现右下角切角效果*/
.cut-corner-bottom-right {
width: 200px;
height: 100px;
border-bottom-right-radius: 30px;
background-color: #eee;
}
.cut-corner-bottom-right:before {
content: "";
display: block;
position: absolute;
bottom: 0px;
right: 0px;
width: 0;
height: 0;
border-bottom: 30px solid #eee;
border-left: 30px solid transparent;
}

以上代码是四个不同方向的切角效果的实现方法，可以根据需求进行选择使用。利用伪类和 border 实现切角效果，不仅代码简洁，效果也非常不错。在实际应用中，大家还可以通过调整 border 的颜色、粗细和透明度等属性来设计出更加丰富多彩的切角效果。