web-dev-qa-db-ja.com

cssで楕円形を作る方法は？

私は次のような楕円を作りたいです：

enter image description here

しかし、このコードを使用したとき：

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html"; charset="utf-8" />
        <title>Oval</title>
        <style type="text/css">
            .oval {
                width: 160px;
                height: 80px;
                background: #a84909;
                border-radius: 40px;
            }
        </style>
    </head>
    <body>
        <div class="oval"></div>
    </body>
</html>

これは私にこれを与えます：

enter image description here

円を描くには機能しますが、楕円ではありません。

htmlcsscss-shapes
23
rachid

あとは、border-radius: 40pxからborder-radius: 50%。

.oval {
  width: 160px;
  height: 80px;
  background: #a84909;
  border-radius: 50%;
}
<div class="oval"></div>
22
Ali Aboussebaba

境界線の半径をパーセンテージで設定する必要があります。

パーセント：パーセント値を使用して、円の半径のサイズ、または楕円の半長軸と半短軸を示します。水平軸のパーセンテージはボックスの幅を示し、垂直軸のパーセンテージはボックスの高さを示します。負の値は無効です。

ソース： [〜＃〜] mdn [〜＃〜]

Border-radiusのピクセル値が楕円形を出力できない理由の詳細な説明については、 境界半径のパーセンテージ（％）およびピクセル（px） を参照してください

例：

border-radius: 50%;

 .oval {
   width: 160px;
   height: 80px;
   background: #a84909;
   border-radius: 50%;
 }
<div class="oval"></div>
5
web-tiki

次のように、パーセンテージを境界半径として使用します：border-radius: 50%;。

1
delbertooo

これを試して：

     .oval {
            width: 160px;
            height: 80px;
            background: #a84909;
            moz-border-radius: 80px / 40px;
            webkit-border-radius: 80px / 40px;
            border-radius: 80px / 40px;
            }

PS。コンパイラーが目の前にないため、若干のエラーが発生する可能性があります。

1
FeliceM
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html"; charset="utf-8" />
        <title>Oval</title>
        <style type="text/css">
            .oval {
                width: 160px;
                height: 80px;
                background: #a84909;
                border-radius: 50%;
            }
        </style>
    </head>
    <body>
        <div class="oval"></div>
    </body>
</html>

別の考え方が here で説明されています。

1
user3522371
.oval {
  width: 10px;/*change here*/
  height: 157px;/* or here if you want to be more sharper*/
  border-radius: 50%;
  background: #1abc9c;
}
<div class="oval"></div>

より多くの形状が必要な場合は、これらを使用して生成できます

http://enjoycss.com/code/
1
Bogdan Alexandru Militaru

上記のすべての答え、彼は彼の質問に応じて円を望んでいません。彼は楕円形を望んでいます。これは機能しますが、おそらくより良い方法があります。

#oval{position:relative;background-color:green;width:20px;height:100px;  
  display:inline-block;z-index:100;
  }
#one{background-color:green; display:inline-block;width:200px;height:100px;border-radius:50%;position:relative;left:100px;}
#two{background-color:green; display:inline-block;width:200px;height:100px;border-radius:50%;position:relative;left:-100px;}
<div id="one">&nbsp;</div><div id="oval">&nbsp;</div><div id="two">&nbsp;</div>
1
Billy