css - 使用 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>

演示

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

演示