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

另外，关于评论中的提议

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>

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

DEMO

使用 SVG 路径剪辑 div

Clip div with SVG path

css

svg

clipping

clip

image-clipping