web-dev-qa-db-ja.com

CSSを使用した半楕円形

楕円形と半円のミックスを作成しようとしています。

半円は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;
}

しかし、どうすれば半楕円形にできますか？これが私のこれまでの試みです。発生する問題は、フラットトップが見つかったことです ここ 。ありがとう！

htmlcsscss-shapes
11
Nick Bull

考えられる解決策の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>
25
André Dion

http://jsfiddle.net/QGtzW/4/

.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;
}
5
yunzen

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>
0
Mohammad Usman