如何对数值先乘10再除以3后转百分比？附CSS calc实现尝试

核心问题修正 #

现有代码未将计算完成的变量绑定到元素宽度属性，同时缺少绝对定位的父级参照，按以下调整即可生效：

• 给.bar添加position: relative，作为红条绝对定位的定位上下文
• 将计算结果赋值给.red的width属性，同时添加百分比单位完成格式转换
• 计算逻辑可按需合并，无需拆分多余变量

完整可运行代码 #

CSS部分

.bar {
  width: calc(100% / 3);
  height: 30px;
  background-color: white;
  outline: 1px solid black;
  position: relative;
}

.red {
  --target: calc(300 / 400); /* 替换为你的目标数值 */
  --calc-result: calc(var(--target) * 10 / 3); /* 按要求执行乘10除以3计算 */
  width: calc(var(--calc-result) * 1%); /* 转换为百分比宽度，如需放大100倍则替换为*100% */
  height: 30px;
  position: absolute;
  background-color: red;
}

HTML部分

<center>
  <h1>141k</h1>
  <div class="percentage-bar">
    <div class="bar">
      <div class="red"></div>
    </div>
  </div>
</center>

逻辑说明 #

如果你的目标数值为x，最终百分比宽度的计算规则可总结为：

• 若需要计算结果x*10/3直接对应百分比数值（如计算结果为2.5对应宽度2.5%），使用calc(var(--calc-result) * 1%)
• 若需要将小数计算结果转换为百分比（如计算结果为0.025对应宽度2.5%），使用calc(var(--calc-result) * 100%)

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