分享給大家兩個svg畫的波浪線

效果圖一:

html代碼:

    

     <div class="nectar-shape-divider-wrap" style=" height:80px;" data-front="" data-style="mountains" data-position="bottom">
			<svg class="nectar-shape-divider" fill="#ffffff" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 300" preserveAspectRatio="none">  
            <path d="M 1014 264 v 122 h -808 l -172 -86 s 310.42 -22.84 402 -79 c 106 -65 154 -61 268 -12 c 107 46 195.11 5.94 275 137 z"></path>  
            <path d="M -302 55 s 235.27 208.25 352 159 c 128 -54 233 -98 303 -73 c 92.68 33.1 181.28 115.19 235 108 c 104.9 -14 176.52 -173.06 267 -118 c 85.61 52.09 145 123 145 123 v 74 l -1306 10 z"></path>  
            <path d="M -286 255 s 214 -103 338 -129 s 203 29 384 101 c 145.57 57.91 178.7 50.79 272 0 c 79 -43 301 -224 385 -63 c 53 101.63 -62 129 -62 129 l -107 84 l -1212 12 z"></path>  
            <path d="M -24 69 s 299.68 301.66 413 245 c 8 -4 233 2 284 42 c 17.47 13.7 172 -132 217 -174 c 54.8 -51.15 128 -90 188 -39 c 76.12 64.7 118 99 118 99 l -12 132 l -1212 12 z"></path>  
            <path d="M -12 201 s 70 83 194 57 s 160.29 -36.77 274 6 c 109 41 184.82 24.36 265 -15 c 55 -27 116.5 -57.69 214 4 c 49 31 95 26 95 26 l -6 151 l -1036 10 z"></path> 
			</svg>
		</div>

css代碼:

.nectar-shape-divider {
	width: 100%;
	left: 0;
	bottom: -1px;
	height: 100%;
	position: absolute;
}
.nectar-shape-divider-wrap {
	position: absolute;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 150px;
    z-index: 2;
    transform: translateZ(0);
}

.post-area.span_9 .nectar-shape-divider-wrap {
    overflow: hidden;
}


.nectar-shape-divider-wrap[data-position="top"] { 
	top: -1px;
	bottom: auto;
}
.nectar-shape-divider-wrap[data-position="top"] {
  transform: rotate(180deg)
}

.nectar-shape-divider-wrap[data-front="true"] {
  z-index: 50;
}

.nectar-shape-divider-wrap[data-style="fan"] svg { width: 102%; left: -1%; }
.nectar-shape-divider-wrap[data-style="fan"] svg polygon:nth-child(2) { opacity: 0.15; }
.nectar-shape-divider-wrap[data-style="fan"] svg rect { opacity: 0.3; }

.nectar-shape-divider-wrap[data-style="mountains"] svg path:first-child { opacity: 0.1; }
.nectar-shape-divider-wrap[data-style="mountains"] svg path:nth-child(2) { opacity: 0.12; }
.nectar-shape-divider-wrap[data-style="mountains"] svg path:nth-child(3) { opacity: 0.18; }
.nectar-shape-divider-wrap[data-style="mountains"] svg path:nth-child(4) { opacity: 0.33; }

.nectar-shape-divider-wrap[data-style="curve_opacity"] svg path:nth-child(1),
.nectar-shape-divider-wrap[data-style="waves_opacity_alt"] svg path:nth-child(1) { opacity: 0.15; }
.nectar-shape-divider-wrap[data-style="curve_opacity"] svg path:nth-child(2),
.nectar-shape-divider-wrap[data-style="waves_opacity_alt"] svg path:nth-child(2) { opacity: 0.3; }

效果圖二:

代碼:

<div class="nectar-shape-divider-wrap" style=" height:60px;" data-front="" data-style="fan" data-position="bottom">
		<svg class="nectar-shape-divider" fill="#f9f9f9" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1003.92 91" preserveAspectRatio="none"> 
			<polygon class="cls-1" points="502.46 46.31 1 85.67 1 91.89 1002.91 91.89 1002.91 85.78 502.46 46.31">
			</polygon>
			<polygon class="cls-2" points="502.46 45.8 1 0 1 91.38 1002.91 91.38 1002.91 0.1 502.46 45.8">
			</polygon>
			<rect class="cls-3" y="45.81" width="1003.92" height="46.09">
			</rect>
            </svg>
	</div>