楕円形と半円のミックスを作成しようとしています。
半円はCSSでそのように作成できます。
.halfCircle{
height:45px;
width:90px;
border-radius: 90px 90px 0 0;
-moz-border-radius: 90px 90px 0 0;
-webkit-border-radius: 90px 90px 0 0;
background:green;
}
そして楕円形はこのように作ることができます:
.oval {
background-color: #80C5A0;
width: 400px;
height: 200px;
margin: 100px auto 0px;
border-radius: 200px / 100px;
}
しかし、どうすれば半楕円形にできますか?これが私のこれまでの試みです。発生する問題は、フラットトップが見つかったことです ここ 。ありがとう!
考えられる解決策の1つでデモを更新しました。
div {
background-color: #80C5A0;
width: 400px;
height: 100px;
border-radius: 50% / 100%;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
<div></div>
border-radius
にパーセンテージベースの単位を使用することにより、width
およびheight
の値に関係なく、常に滑らかな半楕円を維持する必要があります。
いくつかの小さな変更を加えて、半楕円を垂直方向に半分に分割してレンダリングする方法を次に示します。
div {
background-color: #80C5A0;
width: 400px;
height: 100px;
border-radius: 100% / 50%;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
<div></div>
.halfOval {
background-color: #a0C580;
width: 400px;
height: 100px;
margin: 100px auto 0px;
/* top-right top-left bottom-left bottom-right */
/* or from 10.30 clockwise */
border-radius: 50% 50% 0 0/ 100% 100% 0 0;
}
Css3 radial-gradient()
を使用して、この形状を描画することもできます。
.halfOval {
background: radial-gradient(ellipse at 50% 100%, #a0C580 70%, transparent 70%);
}
.halfOval {
background: radial-gradient(ellipse at 50% 100%, #a0C580 70%, transparent 70%);
margin: 50px auto;
height: 100px;
width: 400px;
}
<div class="halfOval"></div>