ERX95 ERX95 - 3 months ago 7
CSS Question

Remove gradient when color is less than 50%

I made a program that generates a HTML document with divs that have 2 background colors, based on some numerical values. I found out about

linear-gradient
, and my code looks like this:



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>





How should I rewrite my code so I can get rid of that gradient look when red is below 50%? I don't want to make 2 different div for each color, and I guess that
linear-gradient
it's not the best solution for me. I want all my divs to look like the second one, regardless of the percentage of colors.

Answer

The percentage isn't the space that the color occupy, is the position of each color in the element. You have to set the same percentaje in the two colors to get a solid colors:

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>