css半圆制作

使用border-radius属性

通过设置border-radius属性为50%并配合宽度和高度，可以创建半圆。例如，制作一个上半圆：

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

调整border-radius的四个值可以控制不同方向的半圆（上、下、左、右）。

使用clip-path属性

clip-path允许通过路径裁剪元素形状。以下代码生成一个右半圆：

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

修改at后的方向参数（如left、top）可改变半圆朝向。

使用伪元素和旋转

通过伪元素旋转实现半圆效果：

.half-circle {
  position: relative;
  width: 50px;
  height: 100px;
  overflow: hidden;
}
.half-circle::after {
  content: '';
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #ffbe76;
  transform: translateX(-50%);
}

调整transform参数可控制显示部分。

SVG实现方案

直接使用SVG绘制半圆，嵌入HTML：

<svg width="100" height="50" viewBox="0 0 100 50">
  <path d="M0,50 A50,50 0 0,1 50,0 L100,0 A50,50 0 0,0 0,50 Z" fill="#6a89cc"/>
</svg>

通过修改path的d属性可调整半圆形态和方向。