分享给大家两个svg画的波浪线

效果图一:

图片.png

代码:
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; }

html部分

效果图二:

图片.png