从品牌网站建设到网络营销策划,从策略到执行的一站式服务
小编给大家分享一下波浪的边框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的实现方法”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!
成都网站建设公司地址:成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220
成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.
专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网! | 成都网站建设哪家好? | 网站建设地图