[css]切角 - 技术栈

使用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;

}