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％）进度条。