web-dev-qa-db-ja.com

CSS border-radiusプロパティを使用して楕円を作成できますか？

長方形の画像を作成しようとしています（ヘッドショット）

width: 200px;   
height: 280px;

楕円として表示します。

辺が平らな状態で、円を描いたり、上下に点を作ったりするのを止められないようです。

助けていただければ幸いです。

htmlimagecssbordercss-shapes
7
Luke Hargraves

仕様 に従って、個々のborder-radiusプロパティは2番目の値を受け入れます。指定されていない場合、最初の値はデフォルトになります。

3.3「border-radius」プロパティ

'border-radius'プロパティの2つの長さの値は、コーナーの形状を定義する1/4楕円の半径を定義します（下の図を参照）。最初の値は水平半径です（または「書き込みモード」が垂直の場合は垂直）。 2番目の長さを省略すると、最初の長さと同じになります（したがって、コーナーは1/4円になります）。いずれかの長さがゼロの場合、角は丸くなく正方形になります。境界線の半径により、要素の背景も丸みを帯びます（境界線が「none」の場合でも）。負の値は許可されていません。

Image from the specification

これを使用して、半径を発生させる場所を正確に指定できます。

div {
  background: red;
  width: 200px;   
  height: 280px; 
  border-bottom-left-radius: 50% 25%;
  border-bottom-right-radius: 50% 25%;
  border-top-left-radius: 50% 25%;
  border-top-right-radius: 50% 25%;
}
<div></div>

楕円は、最初または2番目の値に100%を使用しますが、他の値には100%未満の値を使用します。

div {
  background: red;
  width: 200px;   
  height: 280px; 
  border-bottom-left-radius: 25% 100%;
  border-bottom-right-radius: 25% 100%;
  border-top-left-radius: 25% 100%;
  border-top-right-radius: 25% 100%;
}
<div></div>
13
James Donnelly

あなたは本当に何かを試しましたか？

#test {
  width: 200px;
  height: 280px;
  border: 1px solid;
  border-radius: 50%;
}
<div id='test'></div>
2
Steeve Pitis