divを使用してdivの下に半円を描く方法

私はmyStyleクラスの下に半円を追加したいと思っています。私はまた、底に内側の円が必要です。私は負の境界線は私たちが使うことができるコンセプトだと思うが、それを使う方法はわからない。 divを使用してdivの下に半円を描く方法

期待される結果は以下の画像のようにする必要があります

：

しかし、今、私は次のような結果を得ています：

{

<style> 
    #myStyle { 
     width: 88px; 
     height: 106px; 
     background: yellow; 
     border-top-left-radius: 140px 150%; 
     border-top-right-radius: 165px 147%; 
    } 

</style> 
<body ng-app=""> 
    <p> Insert Some text in the Text Field </p> 
    <p> Enter The Text <input type="text" ng-model="name" placeholder="Enter the Name"> </p> 
    <h1> Hi {{name}}</h1> 
<div class="myStyle" id="myStyle"> 
    <h5 style="text-align:center">Ss</h5> 
</div> 
</body>

出典

2017-01-17 Swapnil Chidrawar

これは境界線のプロパティで行うことができます。下のスニペットを確認してください。

#myStyle { 
 
    position: relative; 
 
    width: 88px; 
 
    height: 106px; 
 
    background: red; 
 
    border-top-left-radius: 140px 150%; 
 
    border-top-right-radius: 165px 147%; 
 
} 
 
#myStyle:after { 
 
    position: absolute; 
 
    bottom: 0; 
 
    display: block; 
 
    content: ''; 
 
    width: 88px; 
 
    height: 44px; 
 
    border-radius: 44px 44px 0 0; 
 
    background: white; 
 
}

<div id="myStyle"></div>

出典

2017-01-17 08:22:07

をこのCSSを使用するが、私は、丸みを帯びた形状を必要とします。私は予想される動作を追加しました。あなたは私を助けてください –

それは私のために働いてくれてありがとう –

素晴らしい！あなたが私の答えを受け入れることができれば嬉しいです。 –

半円形である#myStyle以下のdivを追加し、それに

div{ 
    margin-top: -45px; 
    height:45px; 
    width:90px; 
    border-radius: 90px 90px 0 0; 
    background:white; 
}

出典

2017-01-17 08:24:24

'border-radius'はしばらくの間、ベンダープレフィックスを必要としていませんでした。 –

divを使用してdivの下に半円を描く方法

答えて

関連する問題