CSS - 弧形

HTMLとCSSを使用してシンプルな弧形（アーク型）を描画する方法のコード例です。

HTMLコードは弧形（アーク型）を描画する要素となる<div>タグのクラス名 "arc-shape" を設定しています。

<div class="arc-shape"></div>

CSSカスタムプロパティで基準値とする図形の横幅「--w」を指定しています。
「--angle」では要素の回転を指定できます。

「border-radius」プロパティで丸くする角を限定します。
「border-bottom」を「0」を指定して直線部分のボーダーを無くしています。

/* 弧形 */
.arc-shape {
	--w: 300px; /* 基本サイズ */
	--angle: 0deg; /* 回転 */
	width: var(--w);
	height: calc(var(--w) * 0.5);
	border: solid calc(var(--w) * 0.15) #4169e1;
	border-radius: calc(var(--w) * 0.5) calc(var(--w) * 0.5) 0 0;
	border-bottom: 0;
	box-sizing: border-box;
	transform: rotate(var(--angle));
}