波纹的边框css怎么实现

css实现波浪边框的办法：第一创建一个div，并给它一个类名；然后设定一个背景色彩，并将div设为白色；接着使用伪元素before停止设定，并插入有渐变色彩的外形；最后加上尺寸停止图形的分割，并增添三角形实现波浪结果即可。

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

引荐：《css视频教程》

波浪的边框css的实现

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

<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%
        );
}

4、加上尺寸停止图形的分割。

background-size: 30px 60px;

5、增添正45度角的三角形。

linear-gradient(
 45deg, transparent 33.33%,
 lightblue 33.33%, lightblue 66.66%,
 transparent 66.66%
);

6、对三角形停止扭转，这个时候就有波浪闪现了。

transform: rotateX(180deg)

以上就是波浪的边框css如何实现的具体内容，更多请关注百分百源码网其它相关文章！