CSS - 扇形

HTMLとCSSで扇形の形状を作成するコード例です。

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

<div class="fan"></div>

このCSSコード例では扇形を「border」プロパティで描画しています。
「border-width」でふたつの辺にサイズを指定、「border-radius」プロパティを一辺のみに丸みを与える事で、扇の形を作っています。

また、「transform」プロパティで丸い部分が上になるように要素の角度を調節します。

/* 扇形 */
.fan {
	border: solid #ff7f50;
	border-width: 200px 200px 0 0;
	border-radius: 200px 0 0 0;
	transform: rotate(45deg);
	margin-bottom: 50px;
}