Clip div with SVG path | 易学教程

问题

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

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

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

来源：https://stackoverflow.com/questions/47461733/clip-div-with-svg-path

标签

css

svg

clipping

clip

image-clipping