使用css实现一个切角的功能,有以下几种方案:
html
<div class="box"></div>
方案一:linear-gradient
linear-gradient配合backgroud-image可以实现背景渐变的效果。linear-gradient的渐变过渡区的占比是总的空间(高度或宽度)减去上下两个着色块空间占比剩下的空间,所以如果后一个颜色的百分比比前一个颜色小的话,会自动将当前颜色值的百分比设置为前面颜色中的最大百分比值,也就是说
css
background:linear-gradient(
red 50%,
orange 40%
);
其实相当于
css
background:linear-gradient(
red 50%,
orange 50%
);
其效果就是过渡区没有空间,即没有过度效果,两个颜色之间是一条直线。
所以可以使用这种方式实现切角效果:
css
div{
margin: 50px;
width: 200px;
height: 100px;
}
.box{
background:linear-gradient(135deg,transparent 10px,lightskyblue 0) left top,
linear-gradient(-135deg,transparent 10px,lightskyblue 0) right top,
linear-gradient(-45deg,transparent 10px,lightskyblue 0) right bottom,
linear-gradient(45deg,transparent 10px,lightskyblue 0) left bottom;
background-size: 50% 50%;
background-repeat: no-repeat;
}

方案二:clip-path
clip-path: polygon可以将图形进行切割。图形的左上角为(0,0)坐标,根据坐标进行切割。
所以假设需要切一个20px的角,可以设置:
css
.box{
width: 200px;
height: 100px;
background-color: lightskyblue;
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);
}

边框
上述两种方案如果加上边框,边框还是矩形,无法实现切角效果。
结合clip-path和linear-gradient可以实现加上边框的效果。
首先把linear-gradient的第一个颜色设成跟border同一个颜色,获得如下效果:
css
.box {
background: linear-gradient(-45deg, #289eef 8px, lightskyblue 0) bottom right,
linear-gradient(45deg, #289eef 8px, lightskyblue 0) bottom left,
linear-gradient(135deg, #289eef 8px, lightskyblue 0) top left,
linear-gradient(-135deg, #289eef 8px, lightskyblue 0) top right;
background-size: 50% 51%;
background-repeat: no-repeat;
border: solid 1px #289eef;
}

使用clip-path把角切掉,这里注意取值的计算,如果linear-gradient的分割线是8px,88 + 88再开根号,那么clip-path的取值应该是11px。
css
.box {
clip-path: polygon(11px 0, calc(100% - 11px) 0,
100% 11px, 100% calc(100% - 11px),
calc(100% - 11px) 100%, 11px 100%,
0 calc(100% - 11px), 0 11px);
background: linear-gradient(-45deg, #289eef 8px, lightskyblue 0) bottom right,
linear-gradient(45deg, #289eef 8px, lightskyblue 0) bottom left,
linear-gradient(135deg, #289eef 8px, lightskyblue 0) top left,
linear-gradient(-135deg, #289eef 8px, lightskyblue 0) top right;
background-size: 50% 51%;
background-repeat: no-repeat;
border: solid 1px #289eef;
}
