section間を波線で分割し、画像にマスクする実装方法をご教示して頂きたいです。

やりたい事

コンテンツ（背景画像あり）とコンテンツ（背景画像あり）の間を波線で分割したい

イメージ

試したこと1

HTMLで罫線を入れ、そこにジグザグなCSSを入れてみましたがギザギザで背景が透過できないものだったため却下。

HTML
1<hr class="zigzag-blu-lgreen">

CSS
1.zigzag-blu-lgreen {
2  /* first color: #3498db second color:; */
3  background: linear-gradient(-135deg, #3498db 5px, transparent 0) 0 5px,
4    linear-gradient(135deg, #3498db 5px, #2ecc71 0) 0 5px;
5  background-color: #333538;
6  background-position: left bottom;
7  background-repeat: repeat-x;
8  background-size: 10px 10px;
9	margin: 0;
10}

試したこと2

波線の調整の仕方や画像透過の方法が不明だったので使用できません。
色々いじっても黒い背景が湧いてくるので画像透過ができない？

HTML
1<div id="wrap">
2  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1500 50" preserveAspectRatio="none" id="svg-bg">
3    <path d="M0,0 v25 q10,10 20,0 t20,0 t20,0 t20,0 t20,0 t20,0 t20,0 t20,0 t20,0 t20,0 t20,0 t20,0 t20,0 t20,0 t20,0 t20,0 t20,0 t20,0 t20,0 t20,0 t20,0 t20,0 t20,0 t20,0 t20,0 t20,0 t20,0 t20,0 t20,0 t20,0 t20,0 t20,0 t20,0 t20,0 t20,0 t20,0 t20,0 t20,0 t20,0 t20,0 t20,0 t20,0 t20,0 t20,0 t20,0 t20,0 t20,0 t20,0 t20,0 t20,0 t20,0 t20,0 t20,0 t20,0 t20,0 t20,0 t20,0 t20,0 t20,0 t20,0 t20,0 t20,0 t20,0 t20,0 t20,0 t20,0 t20,0 t20,0 t20,0 t20,0 t20,0 t20,0 t20,0 t20,0 t20,0 t20,0 t20,0 t20,0 t20,0 t20,0 v-25 Z" fill="#3eba90"></path>
4  </svg>
5</div>

CSS
1#wrap{
2	position: relative;
3	background: #3eba90;
4	width: 100%;
5	height: 200px;
6}
7#svg-bg{
8	position: absolute;
9	bottom: -50px;
10	height: 50px;
11	left: 0;
12	width: 100%;
13}