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%) 进度条。