Wie kann ich div mit einem entgegengesetzten gekrümmten Boden schaffen

Question

So fand ich diese Frage: Can I create a div with a Curved bottom?

Dank es mir gelungen, einen gewölbten Boden eines Bildes zu machen, Code unter:

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

es sieht like that:

(praktisch). Alles wäre schön, aber ... Ich brauche die Kurve totally opposite way zu sein:

Wie kann ich das mit sauberem CSS?

Answer 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>

Answer 2

Sie können es nicht mit nur einem div tun. Border-Radius funktioniert nicht so. Sie können jedoch so etwas mit mehreren Elementen erreichen. Überlagern Sie eine zweite div auf der ersten mit einer gebogenen Spitze, Maskierungsteil der oberen div. Wenn Sie möchten, legen Sie alles in einen Container mit Überlauf: versteckt; den unteren Teil des Overlay div zu verdecken.

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

Hier ist die codepen: http://codepen.io/anon/pen/JKjNPa