1. 样式一
<div class="box"><div class="wave"></div></div>
.box {position: relative;width: 800px;height: 30px;margin: 100px auto;background-color: #0f0;}.wave {position: absolute;left: 0;top: -5px;width: 100%;height: 20px;background: radial-gradient(circle, #0f0 10px, #0f0, transparent 10px, transparent);background-repeat: repeat-x;background-size: 18px 20px;}
2. 样式二
<div class="box"><div class="wave"></div></div>
.box {position: relative;width: 900px;height: 30px;margin: 100px auto;background-color: #0f0;}.wave {position: absolute;left: 0;top: -9px;width: 100%;height: 20px;background: radial-gradient(circle, #0f0 10px, #0f0, transparent 10px, transparent);background-repeat: repeat-x;background-size: 30px 20px;}
3. 样式三
<div class="box"><div class="wave"></div></div>
.box {position: relative;width: 900px;height: 30px;margin: 100px auto;overflow: hidden;}.aux-line {position: absolute;left: 0;top: -20px;width: 100%;height: 40px;background: radial-gradient(circle, transparent 10px, transparent, #f00 10px, #f00);background-repeat: repeat-x;background-size: 30px 30px;background-position: 0 0;}
4. 样式四
<div class="box"><div class="wave"></div><div class="aux-line"></div></div>
.box {position: relative;width: 900px;height: 30px;margin: 100px auto;background-color: #0f0;}.wave {position: absolute;left: 0;top: -5px;width: 100%;height: 20px;background: radial-gradient(circle, #0f0 10px, #0f0, transparent 10px, transparent);background-repeat: repeat-x;background-size: 30px 20px;}.aux-line {position: absolute;left: 0;top: -18px;width: 100%;height: 20px;background: radial-gradient(circle, #fff 10px, #fff, transparent 10px, transparent);background-repeat: repeat-x;background-size: 30px 20px;background-position: 15px 0;}
5. 样式五
<div class="box"><div class="wave"></div><div class="aux-line"></div></div>
.box {position: relative;width: 900px;height: 30px;margin: 100px auto;}.wave {position: absolute;left: 0;top: 0;width: 100%;height: 20px;background: linear-gradient(45deg, transparent 45%, #0f0 55%, transparent 55%);background-repeat: repeat-x;background-size: 39px 20px;background-position: 10px 0;}.aux-line {position: absolute;left: 0;top: 0;width: 100%;height: 20px;background: linear-gradient(135deg, transparent 45%, #0f0 55%, transparent 55%);background-repeat: repeat-x;background-size: 39px 20px;background-position: 30px 0;}
6. 样式六
<div class="test"></div><div class="test1"></div>
body {background: linear-gradient(90deg, #0ff, #ccc);}.test {width: 800px;height: 200px;background: radial-gradient(circle, transparent 30px, transparent, #0f0 30px, #0f0);background-size: 100px 100px;background-repeat: repeat-x;}.test1 {width: 800px;height: 200px;background: radial-gradient(circle, #0f0 30px, #0f0, transparent 30px, transparent);background-size: 100px 100px;background-repeat: repeat-x;}
如有错误，欢迎指正，谢谢！
以上内容仅供参考，欢迎大家讨论。
