如何用CSS将span元素制作成带圆角的彩色半圆弧仪表盘

核心思路 #

利用CSS的transform旋转、border-radius圆角和overflow:hidden裁剪，将矩形span元素转化为半圆弧的分段色块，最终拼成半仪表盘形态。

HTML结构示例 #

假设你已有的结构类似这样（可根据分段数量调整span数量）：

<div class="dashboard">
  <span class="segment seg-red"></span>
  <span class="segment seg-orange"></span>
  <span class="segment seg-green"></span>
  <span class="segment seg-blue"></span>
  <span class="segment seg-darkblue"></span>
</div>

CSS实现代码 #

/* 仪表盘容器：控制整体尺寸和显示范围 */
.dashboard {
  width: 400px;
  height: 200px;
  position: relative;
  overflow: hidden; /* 隐藏超出容器的部分，只留上半圆弧 */
}

/* 基础分段样式：统一转为圆形色块 */
.segment {
  position: absolute;
  width: 400px;
  height: 400px;
  border-radius: 50%; /* 把矩形转成圆形 */
  top: -200px; /* 将圆形下半部分移出容器，只显示上半段 */
  transform-origin: center bottom; /* 旋转中心设为底部中点（圆弧的圆心） */
}

/* 给每个分段设置颜色和旋转角度（半圆弧共180度，5段每段36度） */
.seg-red {
  background-color: #ff4757;
  transform: rotate(0deg);
  border-top-left-radius: 20px; /* 左侧端点添加圆角 */
}

.seg-orange {
  background-color: #ffa502;
  transform: rotate(36deg);
}

.seg-green {
  background-color: #2ed573;
  transform: rotate(72deg);
}

.seg-blue {
  background-color: #1e90ff;
  transform: rotate(108deg);
}

.seg-darkblue {
  background-color: #3742fa;
  transform: rotate(144deg);
  border-top-right-radius: 20px; /* 右侧端点添加圆角 */
}

关键细节说明 #

• 容器尺寸：宽设为高的2倍，确保半圆弧的直径与容器宽度一致。
• 旋转定位：通过transform: rotate()让每个圆形分段占据对应的角度区间，transform-origin保证旋转围绕圆弧圆心进行。
• 圆角处理：仅给首尾分段添加顶部左右圆角，中间分段因相邻色块叠加，圆角会被自然覆盖，无需额外设置。
• 分段数量调整：如果需要更多/更少分段，只需调整每个分段的旋转角度（总角度保持180度），并新增/删除对应的span和样式。

内容的提问来源于stack exchange，提问作者Hitesh Chauhan