[CSS] 半円の作り方

半円の作り方 CSS
スポンサーリンク

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

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

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

<div class="semicircle"><div>
.semicircle {
  width: 200px;
  height: 100px;
  border-radius: 100px 100px 0 0;
  background: blue;
}

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

  1. widthとheightが2:1となる値を指定
  2. backgroundで背景を指定 / borderで枠線を指定
  3. 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方向); となっています。

参考にしてください。

以上!

コメント

タイトルとURLをコピーしました