Clip a circular path of a div with precision (curve path) [duplicate] - html

Question

I would like to curve the bottom side of this rectangle div/background with CSS, so the result is something like this:
Does someone have an idea perhaps how it could be achieved?
.curved {
margin: 0 auto;
height: 400px;
background: lightblue;
border-radius:0 0 200px 200px;
}
<div class="container">
<div class="curved"></div>
</div>

Answer 1

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>
You can also use radial-gradient if you want a transparent shape:
body {
background: pink;
}
.container {
margin: 0 auto;
width: 500px;
height: 200px;
background: radial-gradient(110% 50% at bottom, transparent 50%, lightblue 51%);
}
<div class="container">
</div>
And here is another way using clip-path
.container {
margin: 0 auto;
width: 500px;
height: 200px;
background-color: lightblue;
position: relative;
overflow: hidden;
}
.container:after {
content: "";
position: absolute;
bottom: 0;
right: -5%;
left: -5%;
height: 120px;
background: #fff;
-webkit-clip-path: ellipse(50% 60% at 50% 100%);
clip-path: ellipse(50% 60% at 50% 100%);
}
<div class="container">
</div>
You can also consider SVG:
.container {
margin: 0 auto;
width: 500px;
height: 200px;
background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' width='64' height='48' fill='lightblue'><path d='M0 0 L0 16 C16 6 48 6 64 16 L64 0 Z' /></svg>") top center/auto 700px no-repeat;
}
<div class="container">
</div>
Here is an example if you want also to add border around your shape:
.container {
margin: 0 auto;
width: 500px;
height: 200px;
border: 2px solid #000;
border-bottom: 0;
background: lightblue;
position: relative;
overflow: hidden;
}
.container:after {
content: "";
position: absolute;
height: 80px;
left: -10%;
right: -10%;
border-radius: 50%;
bottom: -62px;
background: #fff;
z-index: 2;
}
.container:before {
content: "";
position: absolute;
height: 82px;
left: -10%;
right: -10%;
border-radius: 50%;
bottom: -62px;
background: #000;
z-index: 1;
}
<div class="container">
</div>
If you want to have an image or gradient as background with the transparency, use mask-image:
body {
background: pink;
}
.container {
margin: 0 auto;
width: 500px;
height: 200px;
-webkit-mask-image: radial-gradient(110% 50% at bottom, transparent 50%, #fff 51%);
mask-image: radial-gradient(110% 50% at bottom, transparent 50%, #fff 51%);
background: linear-gradient(45deg,red,yellow,blue);
}
<div class="container">
</div>

Answer 2

Check this. I created this with :after pseudo element. It can be helpful if the background is solid color.
.curved {
margin: 0 auto;
width: 300px;
height: 300px;
background: lightblue;
position: relative;
}
.curved:after{
background: white;
position: absolute;
content: "";
left:0;
right:0;
bottom: -25px;
height: 50px;
border-radius: 50% 50% 0 0;
}
<div class="container">
<div class="curved"></div>
</div>