当前位置：首页 > CSS

css半圆制作

2026-04-01 03:44:39CSS

使用border-radius制作半圆

通过设置border-radius属性，可以将一个正方形或长方形元素裁剪为半圆形。关键是将border-radius的值设置为大于或等于元素宽度的一半。

.half-circle {
  width: 100px;
  height: 50px; /* 高度为宽度的一半 */
  background-color: #ff6b6b;
  border-radius: 50px 50px 0 0; /* 左上、右上为圆角，左下右下为直角 */
}

使用伪元素和transform

通过伪元素结合transform属性，可以创建更复杂的半圆效果。例如制作一个带有边框的半圆：

.half-circle-with-border {
  position: relative;
  width: 100px;
  height: 50px;
  overflow: hidden;
}

.half-circle-with-border::before {
  content: "";
  position: absolute;
  width: 100px;
  height: 100px;
  border: 5px solid #4ecdc4;
  border-radius: 50%;
  bottom: 0;
}

SVG实现半圆

使用SVG可以创建精确的半圆形，适合需要复杂图形或动画的场景：

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

clip-path裁剪法

clip-path属性可以精确控制元素的显示区域，适合制作不规则半圆：

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

半圆进度条实现

结合CSS动画可以实现动态半圆进度条效果：

css半圆制作

.progress-half-circle {
  width: 100px;
  height: 50px;
  position: relative;
  overflow: hidden;
}

.progress-half-circle::before {
  content: "";
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 10px solid transparent;
  border-top-color: #2ecc71;
  border-right-color: #2ecc71;
  animation: rotate 2s linear infinite;
}

@keyframes rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}