CSS | 半円・半月（Semicircle、Half moon）の作り方

2021-06-162023-11-08CSS 図形デザイン,CSS

CSSで半円・半月を作成する方法を紹介しています。

半円・半月の作り方

CSSのborderプロパティを使った半円（半月）の作成方法です。

See the Pen CSS | Semicircular by yochans (@yochans) on CodePen.

HTMLは、それぞれの半円の向きにあわせて4つのdivタグを追加しています。

<div class="semicircle-1"></div>
<div class="semicircle-2"></div>
<div class="semicircle-3"></div>
<div class="semicircle-4"></div>

長方形の要素に対して、border-radiusで左上、右上、右下、左下の丸みを調節します。

この場合、50％の指定ではなく長方形の長い辺の半分の値を指定すると、丁度半円の形状になります。
横幅150pxで上向きの半円を作成する場合、border-radiusに指定する値は「75px 75px 0 0」となります。

.semicircle-1 {
	position: relative;
	width: 150px;
	height: 75px;
}

.semicircle-1::after {
	content: "";
	position: absolute;
	width: 150px;
	height: 75px;
	background: #1e90ff;
	border-radius: 75px 75px 0 0; /* 下側を丸める */
}

.semicircle-2 {
	position: relative;
	width: 150px;
	height: 75px;
}

.semicircle-2::after {
	content: "";
	position: absolute;
	width: 150px;
	height: 75px;
	background: #1e90ff;
	border-radius: 0 0 75px 75px; /* 上側を丸める */
}

.semicircle-3 {
	position: relative;;
	width: 75px;
	height: 150px;
}

.semicircle-3::after {
	content: "";
	position: absolute;;
	width: 75px;
	height: 150px;
	background: #1e90ff;
	border-radius: 75px 0 0 75px; /* 左側を丸める */
}

.semicircle-4 {
	position: relative;
	width: 75px;
	height: 150px;
}

.semicircle-4::after {
	content: "";
	position: absolute;;
	width: 75px;
	height: 150px;
	background: #1e90ff;
	border-radius: 0 75px 75px 0; /* 右側を丸める */
}

4方向以外の向きを指定したい場合は、transformプロパティのrotate()を指定します。

下記の場合、45度左回りに回転します。

transform: rotate(-45deg);

他要素に影響を与えない、または受けない事が確認できれば、疑似要素を使わずに纏める事も可能です。

.semicircle-1 {
	width: 150px;
	height: 75px;
	background: #1e90ff;
	border-radius: 75px 75px 0 0; /* 下側を丸める */
}

新しいサイト「Material Box」にて更に多くの図形・マーク・アイコンデザインを紹介しています。
CSS – 半円 | Material Box