制作半圆效果 css

使用 border-radius 属性

通过设置 border-radius 属性为 50% 并限制宽度和高度，可以创建一个半圆效果。需要将一侧的 border-radius 设置为 0 以形成半圆。

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

使用 clip-path 属性

clip-path 属性可以裁剪元素为半圆形，通过定义路径或使用 circle() 函数实现。

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

使用 SVG 绘制半圆

通过内联 SVG 可以精确绘制半圆，适合需要复杂图形或动画的场景。

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

使用 transform 和 overflow

结合 transform 和 overflow 属性，通过旋转和隐藏部分内容实现半圆效果。

.half-circle {
  width: 100px;
  height: 100px;
  background-color: #f39c12;
  border-radius: 50%;
  transform: rotate(90deg);
  overflow: hidden;
}

使用伪元素

通过 ::before 或 ::after 伪元素创建半圆，适合需要动态内容或叠加效果的场景。

.half-circle {
  width: 100px;
  height: 50px;
  position: relative;
  overflow: hidden;
}
.half-circle::before {
  content: '';
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: #9b59b6;
  border-radius: 50%;
  bottom: 0;
}