波浪的边框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)
