CSS Question

How to color a single div with 3 different colors? (one third blue, one third white, one third red)

I know we can color a div half by half with different colors. For only two colors, the answer is here:
How to color a div half blue, half yellow?

But it doesn't work with 3 different colors.



div{
width:400px;
height:220px;
background: linear-gradient(to right, #002395 33.33%, white 33.33%, #ed2939 33.33%);
}

<div style="font-size:60px; font-family: arial; display: flex;
justify-content: center; /* center horizontally */
align-items: center; /* center vertically */">FRANCE</div>





Please, help me to find the easiest way to achieve this result with just one single div?
This is how the output should look like:

enter image description here

I found the answer. Thanks for the answers below.

In fact, I just had to change the linear-gradient from

background: linear-gradient(to right, #002395 33.33%, white 33.33%, #ed2939 33.33%);
}


to

background: linear-gradient(to right, #002395, #002395 33.33%, white 33.33%, white 66.66%, #ed2939 66.66%);


And here is the result:



div{
width:400px;
height:220px;
background: linear-gradient(to right, #002395, #002395 33.33%, white 33.33%, white 66.66%, #ed2939 66.66%);
}

<div style="font-size:60px; font-family: arial; display: flex;
justify-content: center; /* center horizontally */
align-items: center; /* center vertically */">FRANCE</div>




Answer

This is done easily using stops. The trick is to have two color stops that are the same, you can make a solid color instantly change to another solid color.

Check this out:

 div{
    	width:400px;
    	height:220px;
    	background: linear-gradient(to right, #002395, #002395 33.33%, white 33.33%, white 66.66%, #ed2939 66.66%);
    }
<div style="font-size:60px; font-family: arial;  display: flex;
  justify-content: center; /* center horizontally */
  align-items: center; /* center vertically */">FRANCE</div>

You can find some more reference on using CSS3 gradients here.

Comments