关于如何用 CSS 实现不同类型波浪线

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;
}

如有错误，欢迎指正，谢谢！
以上内容仅供参考，欢迎大家讨论。