css - Clip div with SVG path

Question

I have two overlapping divs and I am trying to achieve the following effect:

In order to do that my logic is to get the two divs to overlap, create that shape with SVG inside the second div and use that shape to clip the second div and show what’s below it (the top div).

I’m not sure if this is the best logic to follow to achieve this and if it is I’m not sure how to use the SVG to clip the HTML element.

This is my HTML so far:

<div class="banner_1">
</div>

<div class="banner_2">
    <svg viewBox="0 0 500 500" preserveAspectRatio="xMinYMin meet">
        <path d="M0,20 C100,80 350,0 500,30 L500,00 L0,0 Z" style="stroke: none; fill:red;"></path>
    </svg>
</div>

And this my CSS:

.banner_1 {
  min-height: 200px;
  background-color: #41dddb;
}
.banner_2 {
  min-height: 200px;
  background-color: #ddc141;
  margin-top: -100px;
}

Which makes for this https://codepen.io/guillermocarone/pen/gXKpBx

Answer 1

You can use the SVG command clipPath

<clipPath id="svgPath" >
            <path d="M0,20 C100,80 350,0 500,30 L500,00 L0,0 Z" style="stroke: none; fill:red;"/> 
      </clipPath>

<style>
.banner_1 {
  min-height: 200px;
  background-color: #41dddb;
}
.banner_2 {
  min-height: 200px;
  background-color: #ddc141;
  margin-top: -100px;
}
</style>
<div class="banner_1">
</div>

<div class="banner_2">
    <svg viewBox="0 0 500 500" preserveAspectRatio="xMinYMin meet"> 
<defs>
<clipPath id="svgPath" >
<path d="M0,20 C100,80 350,0 500,30 L500,00 L0,0 Z" style="stroke: none; fill:red;"/> 
  </clipPath>
</defs>

<rect width="100%" height="100%" fill="#41dddb"  clip-path="url(#svgPath)"  />
        
    </svg>
</div>