Волнистый пограничный разделитель на две секции с изображениями [фон]

Question

Я боролся за создание волнистой линии при переходе между двумя разделами на моей странице.Эти два раздела имеют соответствующие фоновые изображения.Я обнаружил примеры, где по крайней мере один раздел имеет простой цветной фон.

Проблема в том, что при использовании некоторых из найденных методов (svg, clip-path, transform) я должен всегда заполнятьс цветом.

Что я хочу: https://imgur.com/R1sXk8y

Что я сделал до сих пор: https://imgur.com/CtVLOE8 (Это пример наклонной линии. Я должен сделать различныефигуры на разных границах, но это пример, показывающий разделение, которое будет замечено и с волнистой границей)

Answer 1

Это мое решение: я использую clip-path, как вы и предполагали, хотя, как вы, возможно, знаете, clip-path поддерживается не во всех браузерах.

Основная идея заключается в использовании clipPathUnits="objectBoundingBox",

MDN-кавычка:

Это значение [clipPathUnits = "objectBoundingBox"] указывает, что все координаты внутри элемента относятся к ограничивающей рамке элемента, к которому применяется путь отсечения.Это означает, что источником системы координат является верхний левый угол ограничивающего прямоугольника объекта, а ширина и высота ограничивающего прямоугольника объекта имеют длину, равную единице.

*{margin:0;padding:0;}
#top {
  padding: 0;
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/castell.jpg);
  background-size: cover;
  height: 50vh;
  -webkit-clip-path: url(#clip);
  clip-path: url(#clip);  
}

body{background:url(https://images.unsplash.com/photo-1470327500070-4857199b1bcd?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ);background-size:cover}

<svg height="0" width="0" class="svg-clip" style="position:absolute">
    <defs>
         <clipPath id="clip" clipPathUnits="objectBoundingBox">
           <path d="M0,0 L0,.5 Q.3,.2 .5,.5  T1,.5L1,0 0,0" />
        </clipPath>
    </defs>
</svg>
 
<div id="top"></div>