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

`HTMLElement` does not create a canvas like `SVGSVGElement` does — Trash Can, Nov 23 '17 at 18:44
@Dummy do you have a different approach in mind to achieve this? — Guillermo Carone, Nov 23 '17 at 18:51

Alexandr_TT · Accepted Answer · 2017-11-26T14:50:02.373

3

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>

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: #41dddb;
 
}
.banner_2 {
  background:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/hawaii-beach.jpg);
   background-size:cover;
}

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

To replace the lower picture, change the background:url

DEMO

edited Nov 26 '17 at 14:50

answered Nov 23 '17 at 19:08

Alexandr_TT

13,635
3
27
54

Thanks! However, if I'm understanding your approach correctly, this isnt any different to what I already had changing the the color of my red shape to the color of the div behind it right? It's not actually clipping the div, so it would not work for example if those were images instead of solid colors. Right? – Guillermo Carone Nov 23 '17 at 19:25
@Guillermo Carone Cuts and image Make a second example? – Alexandr_TT Nov 23 '17 at 19:29
I've added a second example image to my question with the photo situation I was describing. Is this what you were asking for? – Guillermo Carone Nov 23 '17 at 20:26
@GuillermoCarone If I understand you correctly, do you want to get the result, as in your second example - two cropped images are connected? or you need to crop only one picture, and the second part will remain as a background – Alexandr_TT Nov 26 '17 at 10:28
1

Yes, that is correct, only te bottom image needs to be clipped and it will overlap the top one. What I would like to do though is clip it using code, not editing the picture with Photoshop for example, in order to make that image easily editable for a non-photoshop-savy user through an admin panel – Guillermo Carone Nov 26 '17 at 13:28

Clip div with SVG path

1 Answers1

Linked

Related