本文介绍了利用线性渐变的方法来创建波浪形边框的方法, 有着一定的参考价值, 现在将它分享给各位, 希望对各位有帮助.
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)
本文来自 CSS3 答疑 https://www.html.cn/qa/css3/ 栏目, 欢迎学习!
来源: http://www.css88.com/qa/css3/15915.html