【CSS】半円を作る方法

CSSで半円を作るには、ボーダー半径と擬似要素を組み合わせて簡単に実現できます。CSSのみを使って半円を作成する方法の例を紹介します。

単一の要素で半円を作る

1つの要素で半円を作成するには、border-radiusを使って、要素の一部だけを表示します。

HTML

<div class="half-circle"></div>

CSS

.half-circle {
  width: 100px;
  height: 50px; /* 高さを幅の半分にする */
  background-color: #3498db;
  border-top-left-radius: 100px;  /* 左上の半径を幅に合わせる */
  border-top-right-radius: 100px; /* 右上の半径を幅に合わせる */
}

Before/After 擬似要素で半円を作る

::beforeや::after擬似要素を使って、さらにカスタマイズした半円を作成することも可能です。

HTML

<div class="half-circle"></div>

CSS

.half-circle {
  width: 100px;
  height: 50px;
  position: relative;
  overflow: hidden;
}

.half-circle::before {
  content: "";
  width: 100px;
  height: 100px;
  background-color: #2ecc71;
  border-radius: 50%;
  position: absolute;
}

まとめ

このように、border-radiusや擬似要素を活用することで、CSSのみで簡単に半円を作成することができます。用途に応じて、サイズや色などを調整してください。