[CSS] 半円の作り方

こんにちは、素人エンジニアです。

cssで半円を作る方法を紹介します。
半円の向きごとの指定方法、パーセント(%)での指定方法についても書いています。
コピペで使ってください！

CSSで作る半円のサンプルコード

<div class="semicircle"><div>

.semicircle {
  width: 200px;
  height: 100px;
  border-radius: 100px 100px 0 0;
  background: blue;
}

border-radiusで長方形のうち2つの角を丸めることで、半円にすることができます。
手順としては、次の通りです。

作成したい半円の向きによって、値の指定は以下のように変わります。

半円上向	半円下向
width: 200px; height: 100px; border-radius: 100px 100px 0 0;	width: 200px; height: 100px; border-radius: 0 0 100px 100px;
半円右向	半円左向
width: 100px; height: 200px; border-radius: 0 100px 100px 0;	width: 100px; height: 200px; border-radius: 100px 0 0 100px

border-radiusに指定する4つの値は、
border-radius: 左上右上右下左下; の順になっています。

border-radiusをパーセント(%)で指定するには、水平方向(width方向)と鉛直方向(height方向)で分ける必要があります。

半円上向（%指定）	半円下向（%指定）
width: 200px; height: 100px; border-radius: 50% 50% 0 0 / 100% 100% 0 0;	width: 200px; height: 100px; border-radius: 0 0 50% 50% / 0 0 100% 100%;
半円右向（%指定）	半円左向（%指定）
width: 100px; height: 200px; border-radius: 0 100% 100% 0 / 0 50% 50% 0;	width: 100px; height: 200px; border-radius: 100% 0 0 100% / 50% 0 0 50%;

border-radius: 水平方向(width方向) / 鉛直方向(height方向); となっています。

参考にしてください。

以上！