CSS - 楕円

楕円を描画するHTMLとCSSコード例です。

HTML要素には、楕円形の要素となる<div>タグにクラス名 "ellipse" を設定しています。

<div class="ellipse"></div>

CSSで楕円形を表現するには「width」プロパティと「height」プロパティの値にそれぞれ違う値を指定するか、「border-radius」プロパティに２つ以上の値を指定して要素を円形ています。

コード例では、「width」プロパティと「height」プロパティの値に差を付けています。

/* 楕円 */
.ellipse {
	width: 250px;
	height: 150px;
	background: #ffd700;
	border-radius: 50%;
}