色が50％未満のときにグラデーションを削除する

Question

いくつかの数値に基づいて2つの背景色を持つdivでHTML文書を生成するプログラムを作成しました。私は約linear-gradientを発見し、私のコードは次のようになります。

div { 
 
    width: 100%; 
 
    height: 5%; 
 
}

<div style="background: linear-gradient(to right, red 40%, green 60%);">.</div> 
 
<div style="background: linear-gradient(to right, red 60%, green 40%);">.</div>

どのように私は私のコードを書き換える必要があり、赤が50％未満であるときに、私はその勾配ルックを取り除くことができますか？私は各色ごとに2つの異なるdivを作成したくないので、linear-gradientはそれが私にとって最高の解決策ではないと思います。色の割合にかかわらず、すべてのdivが2番目のdivのように見えるようにします。

Answer 1

パーセントは、色が占めるスペースではなく、要素内の各色の位置です。

div { 
 
width: 100%; 
 
height: 5%; 
 
}

<div style="background: linear-gradient(to right, red 40%, green 40%);">.</div> 
 
<div style="background: linear-gradient(to right, red 50%, green 50%);">.</div> 
 
<div style="background: linear-gradient(to right, red 30%, green 30% ,green 60%, blue 60%);">.</div>

：あなたは、ソリッドカラーを取得するために、2つの色で同じpercentajeを設定する必要があります