波浪的边框css怎么实现-木庄网络博客

2022-03-22 15:11:22 PHP中文网 JavaScript 百度已收录

本文摘自PHP中文网，作者藏色散人，侵删。

css实现波浪边框的方法：首先新建一个div，并给它一个类名；然后设置一个背景颜色，并将div设为白色；接着使用伪元素before进行设置，并插入有渐变颜色的形状；最后加上尺寸进行图形的分割，并增加三角形实现波浪效果即可。

本教程操作环境：Dell G3电脑、Windows7系统、HTML5&&CSS3版本。

推荐：《css视频教程》

波浪的边框css的实现

1、新建一个div，并给它一个类名

1	`<div` `class="zigzag"></div>`

2、设置一个背景颜色，并将div设为白色

body {
    margin: 0;
    padding: 0;
    background: lightblue;
}
.zigzag {
    position: absolute;
    top: 50%;
    width: 100%;
    height: 50%;
    background: #fff;
}

3、这里使用伪元素before进行设置，插入有渐变颜色的形状。

.zigzag:before
{
    content: '';
    position: absolute;
    width: 100%;
    height: 20px;
    display: block;
    background: linear-gradient(
        -45deg, transparent 33.33%,
        lightblue 33.33%, lightblue 66.66%,
        transparent 66.66%
        );
}