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>

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.