如何用CSS的clip-path实现元素中心的半圆裁剪效果？

方法1：使用CSS clip-path: circle()（最简单） #

这种方法适合快速实现上下/左右方向的中心半圆裁剪，通过调整圆心位置和半径即可控制裁剪区域。

示例：中心下半圆裁剪 #

<div class="semi-circle-bottom"></div>

.semi-circle-bottom {
  width: 200px;
  height: 200px;
  background: #2196F3;
  /* 圆心定位在元素底部中心，半径取元素宽度的50% */
  clip-path: circle(50% at center bottom);
}

示例：中心上半圆裁剪 #

.semi-circle-top {
  width: 200px;
  height: 200px;
  background: #2196F3;
  clip-path: circle(50% at center top);
}

参数说明：

• circle(50% at center bottom)：50%为裁剪圆的半径（刚好覆盖元素横向范围），at center bottom指定圆心在元素底部中心，因此只有圆的下半部分会被保留，上半部分被裁剪。

方法2：使用SVG clipPath（适配复杂半圆场景） #

如果需要椭圆型半圆或更精确的路径控制，可通过SVG定义裁剪路径后应用到div上。

示例：中心右半圆裁剪 #

<svg width="0" height="0">
  <defs>
    <clipPath id="right-semi-circle">
      <!-- 路径从左上角出发，绘制到右上角→右下角，再通过椭圆弧回到左下角，最后闭合路径 -->
      <path d="M0,0 L100%,0 L100%,100% A50%,50% 0 0 1 0,100% Z" />
    </clipPath>
  </defs>
</svg>

<div class="right-semi"></div>

.right-semi {
  width: 200px;
  height: 200px;
  background: #FFC107;
  clip-path: url(#right-semi-circle);
}

方法3：结合overflow: hidden和伪元素（兼容旧浏览器） #

针对不支持clip-path的旧浏览器，可通过容器隐藏+伪元素造圆的方式实现：

示例：中心下半圆 #

<div class="semi-circle-container"></div>

.semi-circle-container {
  width: 200px;
  height: 100px; /* 高度等于半圆的半径 */
  overflow: hidden;
  position: relative;
}

.semi-circle-container::after {
  content: '';
  position: absolute;
  top: 0;
  left: -50%;
  width: 200%;
  height: 200%;
  background: #4CAF50;
  border-radius: 50%;
}

原理：用伪元素生成一个完整的圆形，通过容器的overflow: hidden只显示下半部分区域。

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