curved div with transparent top

You can use clip path in both ways (on the top element or the bottom one) and simply make top and bottom to overlay like this :

.first,
.second {
  display: inline-block;
  margin: 5px;
}

.first .top {
  clip-path: circle(72.9% at 50% 27%);
  height: 200px;
  width: 200px;
  background: url(https://i.picsum.photos/id/10/800/800.jpg) center/cover;
  position: relative;
}

.first .bottom {
  margin-top: -70px;
  background: yellow;
  height: 100px;
  width: 200px;
}

.second .top {
  height: 200px;
  width: 200px;
  background:url(https://i.picsum.photos/id/10/800/800.jpg) center/cover;
  position: relative;
}

.second .bottom {
clip-path: polygon(0 25%, 14% 41%, 28% 51%, 49% 54%, 66% 53%, 79% 48%, 89% 39%, 100% 27%, 100% 100%, 47% 100%, 0% 100%);
  margin-top: -70px;
  background: yellow;
  height: 100px;
  width: 200px;
}

<div class="first">
  <div class="top">
  </div>
  <div class="bottom">
  </div>
</div>

<div class="second">
  <div class="top">
  </div>
  <div class="bottom">
  </div>
</div>

Here is a useful link to generate path :

https://bennettfeely.com/clippy/

Here is another idea using radial-gradient

.first  {
  height: 200px;
  width: 400px;
  background: 
    radial-gradient(100% 100% at top, transparent 60%, yellow 61%), 
    url(https://i.picsum.photos/id/10/800/800.jpg) center/cover;
  
}

<div class="first">
  
</div>

Using mask if you want transparency:

.first  {
  height: 200px;
  width: 400px;
  background: url(https://i.picsum.photos/id/10/800/800.jpg) center/cover;
  -webkit-mask:radial-gradient(100% 100% at top, #fff 60%, transparent 61%);
          mask:radial-gradient(100% 100% at top, #fff 60%, transparent 61%);
}
.bottom {
  -webkit-mask:radial-gradient(100% 100% at top, transparent 60%, #fff 61%);
          mask:radial-gradient(100% 100% at top, transparent 60%, #fff 61%);

}
body {
  background:yellow;
}

<div class="first">
  
</div>

<div class="first bottom">
  
</div>

More Related Contents:

Leave a Comment Cancel reply