如何使用CSS对齐仪表盘刻度数值与刻度线实现指定UI效果

原有代码因为缺少统一定位父级、标签坐标未匹配半圆几何端点，导致刻度位置偏移、无刻度线效果，按以下代码修改即可完全匹配需求：

修正后代码 #

CSS 样式 #

/* 外层容器作为所有标签的统一定位父级 */
.sc-gauge  { 
  width:200px; 
  height:200px; 
  margin:200px auto; 
  position: relative;
}

.sc-background { 
  position:relative; 
  height:100px; 
  margin-bottom:10px; 
  background-color:gray; 
  border-radius:150px 150px 0 0; 
  overflow:hidden; 
  text-align:center; 
}

.sc-mask { 
  position:absolute; 
  top:20px; 
  right:20px; 
  left:20px; 
  height:80px; 
  background-color:#fff; 
  border-radius:150px 150px 0 0 
}

.sc-percentage { 
  position:absolute; 
  top:100px; 
  left:-200%; 
  width:400%; 
  height:400%; 
  margin-left:100px; 
  background-color:#00aeef; 
  transform:rotate(70deg); 
  transform-origin:top center; 
}

/* 0刻度：左起始端定位 */
.sc-min { 
  position: absolute;
  left: 0;
  top: 100px;
  transform: translateY(-50%);
}

/* 2刻度：右终止端定位 */
.sc-max { 
  position: absolute;
  right: 0;
  top: 100px;
  transform: translateY(-50%);
}

/* 1刻度：顶部中心定位 */
.sc-avg {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* 中间数值显示位置调整 */
.sc-value { 
  position:absolute; 
  top:60%;
  left:0; 
  width:100%;  
  font-size:48px; 
  font-weight:700 
}

/* 三个位置的短刻度线（伪元素实现，无需新增HTML标签） */
.sc-min::after,
.sc-max::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 5px;
  height: 2px;
  background: gray;
}
/* 左端点刻度线：朝弧面延伸 */
.sc-min::after {
  right: -8px;
  transform: translateY(-50%);
}
/* 右端点刻度线：朝弧面延伸 */
.sc-max::after {
  left: -8px;
  transform: translateY(-50%);
}
/* 顶部点刻度线：朝弧面延伸 */
.sc-avg::after {
  content: '';
  position: absolute;
  top: calc(100% + 3px);
  left: 50%;
  width: 2px;
  height: 5px;
  background: gray;
  transform: translateX(-50%);
}

HTML 结构（和原有结构一致，无修改） #

<div class="sc-gauge">
    <div class="sc-background">
      <div class="sc-percentage"></div>
      <div class="sc-mask"></div>
      <span class="sc-value">0.7 gb</span>
    </div>
    <span class="sc-min">0</span>
    <span class="sc-avg">1</span>
    <span class="sc-max">2</span>
</div>

效果匹配说明 #

• 0、2刻度分别精准对齐半圆的左起始端、右终止端，水平高度和弧面端点完全重合
• 左、顶、右三个位置自动生成短灰色刻度线，和弧面自然衔接
• 1刻度精准锚定在半圆顶部中心，无位置偏移
• 原有蓝色填充的旋转逻辑完全保留，不影响数值和角度的映射关系

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