当前位置：首页 > backend >正文

[css]切角

backend 2025/8/5 2:16:46

使用css实现一个切角的功能，有以下几种方案：

<div class="box"></div>

方案一：linear-gradient

linear-gradient配合backgroud-image可以实现背景渐变的效果。linear-gradient的渐变过渡区的占比是总的空间（高度或宽度）减去上下两个着色块空间占比剩下的空间，所以如果后一个颜色的百分比比前一个颜色小的话，会自动将当前颜色值的百分比设置为前面颜色中的最大百分比值，也就是说

background:linear-gradient(red 50%,orange 40%
);

其实相当于

background:linear-gradient(red 50%,orange 50%
);

其效果就是过渡区没有空间，即没有过度效果，两个颜色之间是一条直线。
所以可以使用这种方式实现切角效果：

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的角，可以设置：

.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同一个颜色，获得如下效果：

.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。

.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;}