CODEWITHSUNDEEP
csswordpressimagecurve
Krzysztof
Krzysztof

Reputation: 91

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?

Upvotes: 3

Views: 1615

Answers (2)

John David Kievlan
John David Kievlan

Reputation: 114

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

Upvotes: 1

Ani Menon
Ani Menon

Reputation: 28249

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>

Upvotes: 2

Related Questions