[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;

}
相关推荐
cos1 小时前
FE Bits 前端周周谈 Vol.1|Hello World、TanStack DB 首个 Beta 版发布
前端·javascript·css
斯~内克4 小时前
前端CSS重绘与重排深度解析:从原理到优化实战
前端·css
琹箐5 小时前
CSS font-weight:500不生效
前端·css
典学长编程6 小时前
前端开发(HTML,CSS,VUE,JS)从入门到精通!第二天(CSS)
前端·javascript·css·html
Suppose6 小时前
[css]旋转流光效果
css
姜太小白8 小时前
【前端】CSS Flexbox布局示例介绍
前端·css
是你的小橘呀9 小时前
【CSS】揭秘 CSS 浮动:让元素乖乖排队的 "魔法咒语"
css
JuneXcy10 小时前
11.Layout-Pinia优化重复请求
前端·javascript·css
换日线°21 小时前
css 不错的按钮动画
前端·css·微信小程序