かわいいDIV半径を行うには

Question

私は、右上と左上にかわいい半径のdivを持っているようにしています。 私は単純に試してみました：私はあなたが2つの要素を持っている必要がありますしようとしていると思います

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

希望のdiv半径

実際のdiv半径

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

これを試してみてください、しかし、あなたは正しいポジショニングとsiziesをキャッチする必要があります。

.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

親内：

長い掃引円弧を作成するために非常に大きな幅を持つもの。 角が丸くなっているもの

次に、少しCSSマジックを追加します。

.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

所望の形状は、単一で達成可能ではないように思わボーダー半径。しかし、あなたはこのように、異なる境界半径の2つの形状を組み合わせることができます：

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>