css制作半圆

使用 border-radius 制作半圆

通过设置 border-radius 属性可以轻松创建半圆。将元素的宽度设置为高度的两倍，并设置 border-radius 为 50% 以形成半圆形。

.semicircle {
  width: 100px;
  height: 50px;
  border-radius: 50px 50px 0 0;
  background-color: #3498db;
}

使用 clip-path 制作半圆

clip-path 属性提供了更灵活的裁剪方式，可以精确控制半圆的形状。使用 ellipse 或 circle 函数可以定义半圆。

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

使用 SVG 制作半圆

SVG 是矢量图形的理想选择，可以通过 <path> 或 <circle> 元素绘制半圆。这种方法适合需要复杂图形或动画的场景。

<svg width="100" height="50" viewBox="0 0 100 50">
  <path d="M 0,50 A 50,50 0 0,1 100,50 L 100,0 A 50,50 0 0,0 0,0 Z" fill="#2ecc71"/>
</svg>

使用伪元素制作半圆

通过伪元素 ::before 或 ::after 可以创建半圆效果，这种方法适合在现有元素上添加装饰性半圆。

.element::after {
  content: '';
  display: block;
  width: 100px;
  height: 50px;
  border-radius: 0 0 50px 50px;
  background-color: #9b59b6;
}

使用 transform 制作半圆

结合 transform 属性可以旋转或缩放元素以形成半圆。这种方法适合动态效果或响应式设计。

.semicircle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #f1c40f;
  transform: scaleX(2) translateY(-50%);
}

以上方法各有优势，可根据具体需求选择最适合的实现方式。