Curved Div With Transparent Top

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://picsum.photos/id/10/800/800) center/cover;
  position: relative;
}

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

.second .top {
  height: 200px;
  width: 200px;
  background:url(https://picsum.photos/id/10/800/800) 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>

How to shape a div corner in css

You can hack using multiple elements like this:

.d1 {  width: 100px;  height: 100px;  background-color: #00f;}
.wrapper {  width: 100px;  height: 20px;  background-color: #fff;  margin-top: -20px;}
.d2 {  width: 100%;  height: 100%;  border-radius: 50%;  background-color: #00f;}
.wrapper2 {  width: 100px;  height: 10px;  background-color: #00f;  margin-top: -20px;  position: absolute;}

<div class="d1"></div><div class="wrapper">  <div class="d2"></div></div><div class="wrapper2"></div>

How can I make div rounded corners with transparent background?

for a simple Radius, use this CSS:

div{
-moz-border-radius:10px;  /* for Firefox */
-webkit-border-radius:10px; /* for Webkit-Browsers */
border-radius:10px; /* regular */
opacity:0.5; /* Transparent Background 50% */
}

Greez, Chuggi

CSS transparent curved shape with two rounded sides

Here is an idea using radial-gradient

.box {
  margin-top:120px;
  width:200px;
  height:100px;
  background:white;
}
.box .top {
  height:100px;
  width:150px;
  transform:translateY(-100%);
  position:relative;
  background:#fff;
}

.top:before,
.top:after{
  content:"";
  position:absolute;
  top:0;
  width:50px;
  left:100%;
  bottom:50%;
  background:
    radial-gradient(100% 50% at top left, #fff 98%,transparent 100%) right,
    radial-gradient(100% 50% at bottom right, transparent 98%,#fff 100%) left;
  background-size:50% 100%;
  background-repeat:no-repeat;
}
.top:after {
  transform-origin:bottom;
  transform:scaleY(-1);
}
body {
  background:pink;
}

<div class="box">
<div class="top"></div>
</div>

CSS shape with inset curve and transparent background

You can use a pseudo element with border-radius and background-shadows to create the curve and enable a transparent background for the curve.

Output :

CSS Shape with thransparent inset curve

#shape {  width: 300px; height: 100px;  position: relative;  overflow: hidden;}
#shape:before {  content: '';  position: absolute;  top: 10%; right: 0;  width: 300%;  padding-bottom: 300%;  border-radius: 100%;  background: none;  box-shadow: 10px -10px 5px 300px #F15723;  z-index: -1;}
body{background:url(https://farm9.staticflickr.com/8461/8048823381_0fbc2d8efb.jpg);background-size:cover;}

<div id="shape"></div>

Curve bottom side of the div to the inside with CSS

Simply use border-radius and rely on some overflow. You can also consider pseudo element to avoid extra markup:

.container {  margin: 0 auto;  width: 500px;  height: 200px;  background: lightblue;  position: relative;  overflow: hidden;}
.container:after {  content: "";  position: absolute;  height: 80px;  left: -10%;  right: -10%;  border-radius: 50%;  bottom: -25px;  background: #fff;}

<div class="container"></div>

How to create a curve on the top of a background?

You can adjust your code like below:

.box {
  margin-top:90px; /* make it at lealst the same as the height of the pseudo element */
  width:200px;
  height:100px;
  background:white;
  position:relative;
}

.box:before,
.box:after{
  content:"";
  position:absolute;
  bottom:100%;
  width:50%;
  left:0;
  height:80px; /* adjust this to control the height */
  background:
    radial-gradient(50% 100% at bottom left, #fff 98%,#0000) top,
    radial-gradient(50% 100% at top right  , #0000 98%,#fff) bottom;
  background-size:100% 50%;
  background-repeat:no-repeat;
}
.box:after {
  transform-origin:right;
  transform:scaleX(-1);
}
body {
  background:pink;
}

<div class="box">
</div>

Curved Div With Transparent Top