Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Curve bottom side of the div to the inside with CSS

I would like to curve the bottom side of this rectangle div/background with CSS, so the result is something like this:

enter image description here 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>
like image 555
DevJoe Avatar asked Jan 04 '18 08:01

DevJoe


People also ask

Can I create a div with a curved bottom?

Yes, you can do this in CSS - basically make your div wider than the page to fix the too-rounded edges, then left-positioned to compensate, with bottom border radius using both x & y values, and negative bottom margin to compensate for the gap: .

How do you create an arc in CSS?

CSS Shapes It's possible to draw circles and arcs in CSS by simply creating a square <div> and setting border-radius to 50%. Each side of the border can take a different color or can be set to transparent . The background-color property sets the shape's fill, if any.


2 Answers

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>

CSS curve bottom transparent background


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>

CSS curve with border


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>

CSS bottom curve with gradient

like image 95
Temani Afif Avatar answered Sep 17 '22 14:09

Temani Afif


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>
like image 28
Pons Purushothaman Avatar answered Sep 16 '22 14:09

Pons Purushothaman