次のようにカーブを作成する方法

Question

以下に示すように円の上にdivを作成すると問題が発生します。私はこの

CSSのように設定している

：結果

.count-select { 
    box-shadow: 0 -5px 10px -5px rgba(0,0,0,.8); 
    border-top: 2px solid #E75532; 
    height: auto; 
    width: 100%; 
    background: #fff; 
    position: fixed; 
    bottom: 0; 
    padding: 12px; 
    border-radius: 50%/100px 100px 0 0; 
} 

、それはデザインのようではない、助けるために人々を期待しています。

ありがとうございます！

Answer 1

左/右に負の値を追加することで、要素をオーバーフローさせることができます。あなたは2つのdiv要素の代わりに、1に分割した場合、あなたは国境半径が行くべきか遠くに制御することができます

.container { 
 
    width: 200px; 
 
    border: 1px solid blue; 
 
    height: 200px; 
 
    margin: 0 auto; 
 
    overflow: hidden; 
 
    position: relative; 
 
} 
 

 
.count-select { 
 
    box-shadow: 0 -5px 10px -5px rgba(0, 0, 0, .8); 
 
    border-top: 2px solid #E75532; 
 
    height: 50px; 
 
    background: #fff; 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: -30px; 
 
    right: -30px; 
 
    padding: 12px 30px; 
 
    border-radius: 50%; 
 
    text-align:center; 
 
}

<div class="container"> 
 
    <div class="count-select "> 
 
    select items 
 
    </div> 
 
</div>

Answer 2

：その後、このような内容のオーバーフローを避けるために、いくつかのパディングを追加します。以下の例を参照してください。

body { 
 
    background: lightgoldenrodyellow; 
 
} 
 

 
.top { 
 
    background: white; 
 
    border-top: 2px solid red; 
 
    border-top-left-radius: 50%; 
 
    border-top-right-radius: 50%; 
 
    height: 100px; 
 
    width: 400px; 
 
    text-align: center; 
 
    box-shadow: 0px -3px 10px rgba(0,0,0,0.3); 
 
} 
 

 
.middle { 
 
    background: white; 
 
    width: 400px; 
 
    height: 100px; 
 
    text-align: center; 
 
    margin: 0; 
 
}

<div class="container"> 
 
<div class="top"> 
 
    <p>Select items and swipe up</p> 
 
</div> 
 
<div class="middle"> 
 
0 items selected 
 
</div> 
 
</div>