如何用CSS绘制半圆？寻求单div实现的最优方案

不用遮挡法，仅靠单个<div class="semi-circle"></div>就能实现半圆，推荐以下几种高效方案：

方案1：border-radius 实现（最常用、性能最优） #

通过控制宽高比例和圆角半径，直接生成半圆，支持四个方向：

/* 上半圆 */
.semi-circle {
  width: 200px;
  height: 100px;
  background: #000;
  /* 圆角值等于高度，左右上圆角设置为高度，下圆角为0 */
  border-radius: 100px 100px 0 0;
}

/* 下半圆 */
.semi-circle.bottom {
  border-radius: 0 0 100px 100px;
}

/* 左半圆 */
.semi-circle.left {
  width: 100px;
  height: 200px;
  border-radius: 100px 0 0 100px;
}

/* 右半圆 */
.semi-circle.right {
  width: 100px;
  height: 200px;
  border-radius: 0 100px 100px 0;
}

方案2：clip-path 实现（灵活度高） #

利用CSS裁剪路径直接对正方形div进行裁剪，精准控制半圆位置：

/* 上半圆 */
.semi-circle {
  width: 200px;
  height: 200px;
  background: #000;
  /* 裁剪圆心在顶部中点，半径50% */
  clip-path: circle(50% at 50% 0);
}

/* 下半圆 */
.semi-circle.bottom {
  clip-path: circle(50% at 50% 100%);
}

/* 左半圆 */
.semi-circle.left {
  clip-path: circle(50% at 0 50%);
}

/* 右半圆 */
.semi-circle.right {
  clip-path: circle(50% at 100% 50%);
}

方案3：radial-gradient 实现（适合渐变背景） #

如果需要带渐变效果的半圆，用径向渐变直接绘制：

.semi-circle {
  width: 200px;
  height: 100px;
  /* 圆心在底部中点，黑色区域占50%，剩余透明 */
  background: radial-gradient(circle at 50% 100%, #000 50%, transparent 50%);
}

以上方案均无需额外遮挡元素，仅用单个div即可完成，代码简洁且性能更优。

内容的提问来源于stack exchange，提问作者user20002028