CSS - 半円

半円の形状を作る為のHTML & CSSのコード例です。

このコード例のHTML要素には、半円の図形の要素にする<div>タグにクラス名 "semicircle" を設定しています。

<div class="semicircle"></div>

長方形の要素に対し「border-radius」プロパティで2点を丸める事で要素を半円ています。

右側が丸い半円の場合「border-radius」プロパティには「0 75px 75px 0」を指定します。

上側が丸い半円であれば「width」を「150px」、「height」を「75」pxとし「border-radius」は「0 0 75px 75px」となります。
下側が丸い半円は「border-radius」は「75px 75px 0 0」となります。

.semicircle {
	--w: 300px; /* 基準サイズ */
	--angle: 0deg; /* 回転 */
	position: relative;
	width: var(--w);
	height: var(--w);
	transform: rotate(var(--angle));
}

.semicircle::before {
	content: "";
	position: absolute;
	top: 5%;
	left: 25%;
	width: 40%;
	height: 80%;
	background: #1e90ff;
	border-radius:  calc(var(--w) * 0.5) 0 0  calc(var(--w) * 0.5);
}