不要图片？CSS实现大屏常见不规则边框（系列二）




/* 定义基本样式 */
.border-irregular {
    position: relative;
    width: 200px;
    height: 200px;
    background-color: #f0f0f0;
}
 
/* 定义伪元素来创建不规则边框 */
.border-irregular:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 200px;
    background-color: #ff0000;
    clip-path: polygon(
        0 0,
        random() * 100%  random() * 100%,
        random() * 100%  random() * 100%,
        100% 100%,
        100% 0
    );
}

这段代码定义了一个.border-irregular类，它会生成一个宽高为200px的方形容器，并在其上应用不规则的红色边框。伪元素通过clip-path属性和polygon函数随机生成不规则的多边形边框。random()函数用于生成随机数，以此创建每次都不同的不规则边框效果。

不要图片？CSS实现大屏常见不规则边框（系列二）

评论已关闭

推荐阅读