css - 带有渐变背景的 HTML 5 进度条标签

Question

我想按如下方式设置 html5 进度条标签的样式:

条形背景本身应该是具有固定 100% 宽度的渐变。但是渐变应该只在条形值所在的位置可见...

progress[value]::-webkit-progress-bar {
  background: linear-gradient(to right, red 1%, green);
}

我应该在样式中为值添加什么，或者我可以做其他事情吗？

  progress[value]::-webkit-progress-value {
    //some code here
  }

或者可能是某种倒置的 css 掩码？

感谢您的帮助!

Answer 1

好的，我用变通方法解决了它。

我在 Y 轴上旋转进度条:

> transform: rotateY(180deg);

然后，我将值背景设置为继承的背景，以使其看起来完全透明。

现在，最后一步，在我的值(value)计算中，我反转了值(value)。因此 value="100" 表示 DOM 中的空进度条，value="0" 表示完整 (100%) 进度条。