Clip div with SVG path

走远了吗. 提交于 2019-11-29 16:45:43

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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!