Krzysztof Krzysztof - 2 years ago 141
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 Source

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;

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download