divの幅のサイズに応じて異なる色を適用しますか？

Question

divの幅の大きさによって異なる色を適用しようとしています。

私のHTMLはこの

<div class="container"> 
     <div class="progress"></div> 
     </div> 

そして、私のCSSではこれです：私はのdocument.getElementByIdと幅のサイズを変更する私のJavaScriptから

div._progress{ 
    background-color: black; 
    width: 100%; 
    height: 20px; 
    padding: 1px; 
    } 
    div.progress{ 
    background-color: green; 
    border-radius: 25%; 
    width: 50%; 
    height: 100%; 
    -webkit-transition:width 350ms ease-in-out, height 350ms ease-in-out; 
    -moz-transition:width 350ms ease-in-out, height 350ms ease-in-out; 
    -o-transition:width 350ms ease-in-out, height 350ms ease-in-out; 
    transition:width 350ms ease-in-out, height 350ms ease-in-out; 
    } 

......

内側のバーがコンテナ幅の90％が赤色になっているときなど、進行の色を変更するにはどうすればよいですか？あなたは、線形グラデーションのプロパティを使用することができ、この

おかげ

Answer 1

よう

何か。 jsで行う必要はありません。 CSSと

#grad1 { 
 
    height: 20px; 
 
    background: linear-gradient(to left, #FF5733 30%, #36FF33 30%, #36FF33 100%); 
 
}

<div id="grad1"></div>