使用SVG路径剪辑div

Question

我有两个重叠的divs，我正在尝试达到以下效果：

为了做到这一点，我的逻辑是让两个div重叠，在第二个div中用SVG创建那个形状，并使用该形状剪辑第二个div并显示它下面的内容（顶部div）。

我不确定这是否是实现此目的的最佳逻辑，如果是，我不确定如何使用SVG剪辑HTML元素。

到目前为止，这是我的HTML：

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

这是我的CSS：

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

这使https://codepen.io/guillermocarone/pen/gXKpBx

成为现实

Answer 1

您可以使用SVG命令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

此外，关于评论中的提案

  

只需要修剪底部图像，它将与顶部重叠   一。

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

  

要替换下方的图片，请更改background:url

DEMO