以渐变为背景的 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="100" 代表 DOM 中的空进度条，value="0" 代表完整 (100%) 进度条。