html边框波浪,波浪的边框css怎么实现

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

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

波浪的边框css的实现

1、新建一个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)