divの曲線下の部分

Question

私は曲線の下の境界線を持つdivがあります。画像に似ていますが、上部にはありません。私はborder-radiusを使ってみましたが、湾曲したボトムを作成していないようです。背景画像を使用せずにこれを行う方法。

Answer 1

あなたは別のコーナーでは境界線半径のための2つの値のそれぞれを組み合わせることができます。

.x { 
 
width: 240px; 
 
height: 120px; 
 
background: #fa0; 
 
border-bottom-left-radius: 120px 40px; 
 
border-bottom-right-radius: 120px 40px; 
 

 
}

<div class="x"></div>

Answer 2

あなたはそのような何かを探していますか？以下の私のスニペットに示すよう

#tv { 
 
    position: relative; 
 
    width: 200px; 
 
    height: 150px; 
 
    margin: 20px 0; 
 
    background: red; 
 
    border-bottom-left-radius: 100px 40px; 
 
    border-bottom-right-radius: 100px 40px; 
 
}

<div id="tv"></div>

Answer 3

うん、どのように2つのdivを作成して、もう一方を作成したら、あなたはこのようになります：

<style> 
    .outer{ 
     width:1000px; 
     height:100px; 
     border-radius:100%; 
    } 
    .inner{ 
     width:100px; 
     height:100px; 
     background:gold; 
     overflow:hidden; 
    } 
</style> 

<div class="outer"> 
    <div class="inner"></div> 
</div> 

あなたはポイントを得ていますか？