CSSを使用して半円を作成する方法

border-radiusを使用する方法: 半円を作成する一つの方法は、border-radiusプロパティを使用することです。要素の幅と高さを設定し、border-radiusを50%に設定することで、要素が半円の形状になります。

例:

<style>
  .half-circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: red; /* 背景色を設定 */
  }
</style>
<div class="half-circle"></div>

::beforeまたは::afterを使用する方法: もう一つの方法は、::beforeまたは::after疑似要素を使用することです。要素にposition: relative;を設定し、::beforeまたは::afterを作成し、border-radiusプロパティと幅、高さ、背景色を設定します。

例:

<style>
  .half-circle {
    position: relative;
    width: 100px;
    height: 50px;
    background-color: blue; /* 背景色を設定 */
  }
  .half-circle::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50% 50% 0 0;
    background-color: blue; /* 背景色を設定 */
  }
</style>
<div class="half-circle"></div>

以上の方法を使用すると、CSSで半円を作成することができます。それぞれの方法を試してみて、デザインに合わせて適切なものを選択してください。