制作半圆效果 css

使用 border-radius 创建半圆

通过设置 border-radius 为元素宽度或高度的一半，可以创建半圆效果。例如，宽度为 200px 高度为 100px 的元素，设置 border-radius: 100px 100px 0 0 可生成上半圆。

.semi-circle {
  width: 200px;
  height: 100px;
  background: #3498db;
  border-radius: 100px 100px 0 0;
}

使用 clip-path 裁剪半圆

clip-path 允许通过 SVG 路径或基本形状裁剪元素。使用 ellipse 或 circle 可以生成半圆。

.semi-circle {
  width: 200px;
  height: 100px;
  background: #e74c3c;
  clip-path: ellipse(50% 100% at 50% 0%);
}

使用伪元素叠加

通过伪元素 ::before 或 ::after 叠加一个圆形，并隐藏下半部分，可以实现半圆效果。

.semi-circle {
  width: 200px;
  height: 100px;
  position: relative;
  overflow: hidden;
}
.semi-circle::before {
  content: '';
  position: absolute;
  width: 200px;
  height: 200px;
  background: #2ecc71;
  border-radius: 50%;
  bottom: 0;
}

使用 transform 旋转

通过旋转一个完整的圆形，并隐藏溢出部分，可以生成半圆。

.semi-circle {
  width: 100px;
  height: 200px;
  background: #9b59b6;
  border-radius: 100px 0 0 100px;
  transform: rotate(90deg);
}

使用 SVG 实现半圆

SVG 的 path 或 circle 元素可以精确绘制半圆，适合需要动态控制的情况。

<svg width="200" height="100">
  <path d="M 0,100 A 100,100 0 0,1 200,100 L 200,0 A 100,100 0 0,0 0,0 Z" fill="#f39c12"/>
</svg>

以上方法可根据需求选择，border-radius 和 clip-path 适合简单场景，伪元素和 SVG 适合复杂交互或动态效果。