How can I create div with an opposite-curved bottom

1 Views

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:

Read More
    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?

Post Views: 1

Related posts

Leave a Reply

2 comments

  1. 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>

  2. You can’t do it with just one div. Border-radius doesn’t work that way. However, you can achieve something like that with multiple elements. Overlay a second div on the first with a curved top, masking part of the upper div. If you like, enclose it all in a container with overflow: hidden; to obscure the bottom part of the overlay div.

    <div class="container">
    <div class="curved">
    </div>
    <div class="curved-overlay">
    </div>
</div>

<style>
.curved-overlay{
    border-radius: 50% 50% 0 0 / 15%;
    background-color: white;
    width: 100px;
    height: 100px;
    margin-top: -15%;
}

.curved{
    background-color: blue;
    width: 100px;
    height: 100px;
}

.container{
    width: 100px;
    height: 100px;
    overflow: hidden;
}
</style>

    Here’s the codepen: http://codepen.io/anon/pen/JKjNPa