html背景设置形状,波浪的边框css怎么实现？

本文介绍了利用线性渐变的方法来创建波浪形边框的方法，有着一定的参考价值，现在将它分享给各位，希望对各位有帮助。

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

本文来自css3答疑栏目，欢迎学习！