如何将标签居中于CSS conic-gradient饼图的百分比区间外侧

核心思路 #

创建通用标签样式类，通过CSS变量传递每个色块的起止百分比，自动计算色块中间角度，再通过旋转变换将标签定位到对应色块的外侧中间位置，替代手动定位的繁琐方式。

修改后的完整代码 #

CSS 代码

.pie-container{
  position: relative;
  width: 300px;
  height: 300px;
  background: radial-gradient(white 30%, transparent 31%), conic-gradient(#66991A 0% 20%, #FF99E6 20% 35%, #CCFF1A 35% 40%, #FF1A66 40% 70%, #E6331A 70% 100%);
  display: inline-block;
  border-radius: 50%;
  float:right;
  margin-right:40%;
}
.center-white{
  font-size: 26px;
  font-weight: bold;
  text-align: center;
  height: 300px;
  padding-top: 42%;
  box-sizing: border-box; /* 避免padding导致高度溢出 */
}
.main-label{
  font-size:22px;
  padding-top:5px;
}
/* 通用饼图标签类 */
.chart-label{
  position: absolute;
  font-weight: bold;
  font-size: 14px;
  --d: 300px; /* 饼图直径 */
  --start: 0; /* 色块起始百分比 */
  --end: 0; /* 色块结束百分比 */
  /* 计算色块中间角度：基于起止百分比平均值转换为角度，减去90度对齐圆锥渐变的顶部起始点 */
  --mid-angle: calc( ((var(--start) + var(--end)) / 2) / 100 * 360deg - 90deg );
  /* 旋转变换逻辑：先以自身中心对齐，转到中间角度，平移到饼图外侧，再转回让文字水平 */
  transform: translate(-50%, -50%) rotate(var(--mid-angle)) translate(calc(.6 * var(--d))) rotate(calc(-1 * var(--mid-angle)));
  background: white;
  padding: 2px 6px;
  border-radius: 3px;
}

HTML 代码

<div class="pie-container">
  <div class="center-white">Visits <div class="main-label">1M</div></div>
  <!-- 绿色色块：0%-20% -->
  <div class="chart-label" style="--start:0; --end:20;">20%</div>
  <!-- 粉色色块：20%-35% -->
  <div class="chart-label" style="--start:20; --end:35;">15%</div>
  <!-- 可继续添加剩余色块标签 -->
  <div class="chart-label" style="--start:35; --end:40;">5%</div>
  <div class="chart-label" style="--start:40; --end:70;">30%</div>
  <div class="chart-label" style="--start:70; --end:100;">30%</div>
</div>

关键细节说明 #

• --mid-angle：通过色块起止百分比的平均值计算中间角度，确保标签精准落在色块正中间。
• translate(calc(.6 * var(--d)))：.6 * 300px = 180px，这个值大于饼图半径（150px），保证标签显示在饼图外侧；可根据视觉需求调整系数，比如.55会更靠近饼图，.65会更远。
• 变换顺序：先通过translate(-50%, -50%)将标签自身中心设为变换原点，再旋转到目标角度、平移到外侧，最后反向旋转保持文字水平。
• 新增box-sizing: border-box：避免.center-white的padding导致内容溢出容器。

内容的提问来源于stack exchange，提问作者Aamir Siddique