波浪的边框css的实现方法
小编给大家分享一下波浪的边框css的实现方法，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
专注于为中小企业提供成都网站制作、成都网站建设服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业沂源免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了上1000家企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。
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://ybzwz.com/article/gohpej.html
