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

Question

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:

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>

Duplicity

Why can't you just use 3 divs? – Vassili

Answer 1

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.

Milkweed

Thanks, this is what I wanted – Duplicity

Can you please explain this? how does it work? why is this wrong background: linear-gradient(to right, #002395 33.33%, white 33.33%, #ed2939 33.33%); – Vedis

You've to use stops here so the solid colors have an immediate transition in the gradient. If you can go through the docs that would explain the answer, specifically this section. – Milkweed

Answer 2

I think applying a gradient color will solve your issue. Try this for your background of the div.

div {
    background: #3b9af9;
    background: -moz-linear-gradient(left,  #3b9af9 0%, #3b9af9 32%, #ffffff 32%, #ffffff 64%, #ef1010 64%, #ef1010 100%);
    background: -webkit-linear-gradient(left,  #3b9af9 0%,#3b9af9 32%,#ffffff 32%,#ffffff 64%,#ef1010 64%,#ef1010 100%);
    background: linear-gradient(to right,  #3b9af9 0%,#3b9af9 32%,#ffffff 32%,#ffffff 64%,#ef1010 64%,#ef1010 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3b9af9', endColorstr='#ef1010',GradientType=1 );
}

You can generate much more gradients of your need from here

Lyautey