楕円形 – css oval –

「楕円形」の描画。値の指定で角丸から楕円まで出来ます。また、borderの使い方で色々と出来そうです。

html

<div class="oval"></div>

css

.oval {
	width: 160px;
	height: 100px;
	background-color: #39a9d6;
	border-radius: 80px / 50px;
}

border

html

<div class="oval_border"></div>

css

.oval_border {
	width: 160px;
	height: 100px;
	background-color: #39a9d6;
	border: 5px solid #2d424f;
	border-radius: 85px / 55px;
}

個別に設定

html

<div class="oval_triangle"></div>

css

.oval_triangle {
	width: 0;
	height: 0;
	border-top: 50px solid #59bde0;
	border-right: 80px solid #39a9d6;
	border-bottom: 50px solid #2d424f;
	border-left: 80px solid #2d8fb5;
	border-radius: 80px / 50px;
}

個別に設定2

html

<div class="oval_triangle2"></div>

css

.oval_triangle2 {
	width: 32px;
	height: 20px;
	background-color: #dce0e0;
	border-top: 40px solid #59bde0;
	border-right: 64px solid #39a9d6;
	border-bottom: 40px solid #2d424f;
	border-left: 64px solid #2d8fb5;
	border-radius: 80px / 50px;
}