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, c

Answer 1

You can use the SVG command clipPath

DEMO

UPD

Additionally, on the proposal in the comments

only te bottom image needs to be clipped and it will overlap the top one.

.banner_1 {
  min-height: 100px;
  background-color: #41ffffdb;
 
}
.banner_2 {
  background:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/hawaii-beach.jpg);
   background-size:cover;
}

To replace the lower picture, change the background:url

DEMO