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

[OK]を、私は回避策で解決しました。

私はY軸上のプログレスバーを回転させる。その後、

> transform: rotateY(180deg); 

、私は、値の背景にそれが完全に透明に見えるようにするために継承された背景を設定。

最後に、私の値の計算では、値を反転しました。したがって、value="100"はDOMの空のプログレスバーを表し、value="0"は完全な（100％）プログレスバーを表します。