Naughty Ninja Naughty Ninja - 6 months ago 9
HTML Question

Change the color of the specific number of percents of the total width in a <div> element

I'm trying to pass two values into the width of a div and paint that many percent of the total fixed size width, with the specific color, something like in the example bellow.

<div style="width: 100px; background-color: red (@Model.value1)%; background-color:green (@Model.value2)%"></div>


This is something similar to a progress bar, all i need is to have two 3 different colors, value 1 in percents, value 2 in percents and the rest if there is any. Is this achievable?

Answer

Sure, with a linear gradient.

div {
  width: 200px;
  height: 50px;
  background: linear-gradient(to right, red, red 40%, blue 40%, blue, 60%, green 60%);
}
<div></div>

Comments