Welcome

カキノタblog

自分の興味あるテーマを中心に、図解多めに記事を作成していきたいと思います。

CSSで楕円形を描く

Html + CSSで楕円形を描く方法です。

CSSで楕円形を描く方法

ソースコード

<style>

.ellipse{
	width: 200px;
	height: 100px;
	background:orange;
	-moz-border-radius: 100px / 50px;
	-webkit-border-radius: 100px / 50px;
	border-radius: 100px / 50px;
}

</style>

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

説明

やり方はとても簡単です。まず200x100の長方形をdivで描き、border-radiusで4隅を丸めていくような流れです。border-radiusをdivのwidthとheightの値の半分ぐらいにすると綺麗な楕円形になります。

参考リンク