Wie man einen süßen DIV-Radius macht

Question

Ich versuche, einen niedlichen Radius div oben rechts und oben links zu haben. Ich versuchte einfach mit:

border-top-left-radius: 5em; 
border-top-right-radius: 5em; 

Wunsch div Radius

Actual div Radius

EDIT

.picker-map { 
    border-top-left-radius: 5em; 
    border-top-right-radius: 5em; 
    height: 200px; 
    opacity: 0.8; 
    background-color: white; 
    border-top: 7px dashed; 
    border-top-color: #FC5241; 
} 

Answer 1

Versuchen Sie dies, aber Sie haben richtige Positionierung und sizies zu fangen:

.box { 
 
    position: relative; 
 
    margin: 30px; 
 
    height: 200px; 
 
    width: 200px; 
 
    background-color: #000; 
 
    border-top-left-radius: 20px; 
 
    border-top-right-radius: 20px; 
 
} 
 

 
.box::before { 
 
    content: ""; 
 
    position: absolute; 
 
    top: -6px; 
 
    left: 10px; 
 
    width: calc(100% - 20px); 
 
    height: 20px; 
 
    border-radius: 50%; 
 
    background-color: #000; 
 
}

<div class="box"></div>

Answer 2

Ich glaube, Sie gehen zu müssen, zwei Elemente haben, innerhalb eines Elternteils:

Eine, die eine sehr große Breite hat, um den langen, geschwungenen Bogen zu erzeugen. Eine, die mit abgerundeten Ecken überlappt

Dann fügen Sie ein wenig CSS Magie.

.container { 
 
    width:500px; 
 
    overflow:hidden; 
 
} 
 
.back { 
 
    width:1000px; 
 
    height:500px; 
 
    background-color:aliceblue; 
 
    border-radius:500px 500px 0 0; 
 
    transform:rotate(49deg) translate(50px, 125px); 
 
} 
 

 
.front { 
 
    width:500px; 
 
    height:500px; 
 
    position:absolute; 
 
    top:90px; 
 
    border-radius:50px; 
 
    background-color:aliceblue; 
 
    
 
}

<div class="container"> 
 
    <div class="back"></div> 
 
    <div class="front"></div> 
 
</div>

Answer 3

Die gewünschte Form scheint mit einem einzigen nicht erreichbar zu sein Grenzradius. Aber man kann zwei Formen mit verschiedenen Grenzradius kombinieren, wie folgt aus:

div { 
 
    background: #ccc; 
 
    border-radius: 10px 10px 0 0; 
 
    position: relative; 
 
    height: 100px; 
 
    margin: 50px 20px 0; 
 
} 
 

 
div::before { 
 
    content: ''; 
 
    position: absolute; 
 
    left: 8px; 
 
    right: 8px; 
 
    top: -14px; 
 
    height: 15px; 
 
    background: #ccc; 
 
    border-radius: 50% 50% 0 0/100% 100% 0 0; 
 
}

<div></div>