[CSS]半円を表示する方法（半円上、半円下、半円左、半円右）

CSSスニペット

2018.10.22

CSS3の「border-radius」の四隅の値と「width」と「height」の値の比率を調整して、「半円」を表示する方法をコード付きで紹介します。

正円
半円上
半円下
半円左
半円右
border-radiusをパーセンテージで指定する場合

正円

まず、border-radiusにより正円を作ります。これが半円を作っていく上での基本形となります。

.circle {
  width:200px;
  height:200px;
  border-radius:100px;
  background:#dd0000;
}

.circle {

width:200px;

height:200px;

border-radius:100px;

background:#dd0000;

}

半円上

上の正円をベースに、まずは下半分が欠けた半円（半円上）から順番にコードを見ていきます。

ポイントは、先程も触れた「border-radius」の値と「width」と「height」の値の比率です。

.circle1 {
  width:200px;
  height:100px;
  border-radius:100px 100px 0 0;
  background:#dd0000;
}

.circle1 {

width:200px;

height:100px;

border-radius:100px 100px 0 0;

background:#dd0000;

}

半円上の場合、正円と比べて高さが半分になるので、widthとheightの値の比率が2:1になります。また、border-radiusは左上と右上の値が100px。右下と左下を表示しないために0を指定します。

半円下

半円下は半円上のときと同じ考えで、widthとheightの値の比率が2:1はになりますが、border-radiusは左上と右上の値が0、右下と左下が100pxと逆の指定になります。

.circle2 {
  width:200px;
  height:100px;
  border-radius:0 0 100px 100px;
  background:#dd0000;
}

.circle2 {

width:200px;

height:100px;

border-radius:0 0 100px 100px;

background:#dd0000;

}

半円左

続いて、左右のどちらかが欠けた半円の表現です。

まずは半円左ですが、これもwidthとheightの値の比率、border-radiusの値の以下のように調整します。

.circle3 {
  width:100px;
  height:200px;
  border-radius:100px 0 0 100px;
  background:#dd0000;
}

.circle3 {

width:100px;

height:200px;

border-radius:100px 0 0 100px;

background:#dd0000;

}

今度はwidthとheightの値の比率が1:2になります。border-radiusは表示しない方の角（右上、右下）の値を0に指定すればOKです。

半円右

最後に半円右です。半円左と同じ考えで、widthとheightの値の比率は1:2、 border-radiusは右上、右下の値は100pxになります。

.circle4 {
  width:100px;
  height:200px;
  border-radius:0 100px 100px 0;
  background:#dd0000;
}

.circle4 {

width:100px;

height:200px;

border-radius:0 100px 100px 0;

background:#dd0000;

}

border-radiusをパーセンテージで指定する場合

上記の半円4つのborder-radiusは、いずれも値にpxを指定したものですが、もちろんパーセンテージで指定することも可能です。

しかしこの場合、border-radiusの水平方向の値と、垂直方向の値を別々に調整する必要があるので、少し厄介です。

半円上（パーセンテージ指定）

.circle11 {
  width:200px;
  height:100px;
  border-radius:50% 50% 0 0/100% 100% 0 0;
  background:#414141;
}

.circle11 {

width:200px;

height:100px;

border-radius:50% 50% 0 0/100% 100% 0 0;

background:#414141;

}

半円下（パーセンテージ指定）

.circle12 {
  width:200px;
  height:100px;
  border-radius:0 0 50% 50% /0 0 100% 100%;
  background:#414141;
}

.circle12 {

width:200px;

height:100px;

border-radius:0 0 50% 50% /0 0 100% 100%;

background:#414141;

}

半円左（パーセンテージ指定）

.circle13 {
  width:100px;
  height:200px;
  border-radius:100% 0 0 100%/50% 0 0 50%;
  background:#414141;
}

.circle13 {

width:100px;

height:200px;

border-radius:100% 0 0 100%/50% 0 0 50%;

background:#414141;

}

半円右（パーセンテージ指定）

.circle14  {
  width:100px;
  height:200px;
  border-radius:0 100% 100% 0%/0 50% 50% 0;
  background:#414141;
}

.circle14 {

width:100px;

height:200px;

border-radius:0 100% 100% 0%/0 50% 50% 0;

background:#414141;

}