波浪的边框css的实现方法-创新互联
小编给大家分享一下波浪的边框css的实现方法，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
css实现波浪边框的方法：首先新建一个div，并给它一个类名；然后设置一个背景颜色，并将div设为白色；接着使用伪元素before进行设置，并插入有渐变颜色的形状；最后加上尺寸进行图形的分割，并增加三角形实现波浪效果即可。
波浪的边框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)
以上是“波浪的边框css的实现方法”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！
当前标题：波浪的边框css的实现方法-创新互联
标题链接：http://6mz.cn/article/peees.html