前言

使用CSS3实现四个角边框,使用到属性-webkit-mask蒙版和 conic-gradient 锥形渐变

实现代码

html 部分代码

   <div class="container">
        <div class="pointer"></div>
    </div>

container的大小100px * 100px,设置相对定位,pointer大小110px * 110px,边框2px,设置绝对定位

.container {
    width: 100px; height: 100px;background: orange; position: relative;
}
.pointer {
    width: 110px; height: 110px; background: orange; position: absolute;  left: -7px; top:-7px;
    border: 2px solid black;
}

pointer设置锥形渐变

.container {
    width: 100px; height: 100px;background: orange; position: relative;
}
.pointer {
    width: 110px; height: 110px; background: orange; position: absolute;  left: -7px; top:-7px;
    border: 2px solid black;
    background: conic-gradient(at 20px 20px, red 75%, blue 75%) 0 0 / calc(100% - 20px) calc(100% - 20px);
}

background的red设置透明的transparent

.container {
    width: 100px; height: 100px;background: orange; position: relative;
}
.pointer {
    width: 110px; height: 110px; background: orange; position: absolute;  left: -7px; top:-7px;
    border: 2px solid black;
    background: conic-gradient(at 20px 20px, transparent 75%, blue 75%) 0 0 / calc(100% - 20px) calc(100% - 20px);
}

使用-webkit-mask替代实现最终效果

.container {
    width: 100px; height: 100px;background: orange; position: relative;
}
.pointer {
    width: 110px; height: 110px; background: orange; position: absolute;  left: -7px; top:-7px;
    border: 2px solid black;
    -webkit-mask: conic-gradient(at 20px 20px, transparent 75%, blue 75%) 0 0 / calc(100% - 20px) calc(100% - 20px);

}

来源声明：用于记录学习心得整理总结，内容非原创。

四角边框的实现

前言

实现代码