带SVG路径的div片段 [英] Clip div with SVG path

问题描述

我有两个重叠的divs，并且我试图达到以下效果:

I have two overlapping divs and I am trying to achieve the following effect:

为了做到这一点，我的逻辑是使两个div重叠，请在第二个div内使用SVG创建该形状，并使用该形状修剪第二个div并显示其下方的内容(顶部div).

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

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

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.

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

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>

这是我的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

推荐答案

您可以使用SVG命令clipPath

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>

演示

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>

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

To replace the lower picture, change the background:url

演示

这篇关于带SVG路径的div片段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！