Krzysztof Krzysztof - 6 months ago 34
CSS Question

How can I create div with an opposite-curved bottom

So I found this question: Can I create a div with a Curved bottom?

Thanks to it I managed to make a curved bottom of an image, using code below:

border-radius: 0 0 50% 50% / 15%;
overflow: hidden;


It looks like that:



(practically). Everything would be nice but... I need the curve to be totally opposite way:



How can I do that with clean CSS?

Answer

Try this:

div {
  height: 250px;
  width: 300px;
  background: tomato;
  position: relative;
  margin:0 auto;
}
div:after {
  content: "";
  height: 50%;
  width: 100%;
  position: absolute;
  background: white;
  border-radius: 50%;
  bottom: -25%;
  transition: all 0.8s;
}
<div></div>