如何用3种不同的颜色为单个div着色？(三分之一蓝色,三分之一白色,三分之一红色)

Question

我知道我们可以用不同的颜色将一半的颜色变成颜色.只有两种颜色,答案就在这里: 如何给div半蓝,半黄？

但它不适用于3种不同的颜色.

 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>

请帮助我找到一个只用一个div来实现这个结果的最简单方法吗？这是输出的样子:

我找到了答案.感谢下面的答案.

事实上,我只需要改变线性渐变

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

至

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

这是结果:

 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

这可以通过停止轻松完成.诀窍是让两个颜色停止相同,你可以使纯色立即变为另一种纯色.

看一下这个:

 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>

您可以在此处找到有关使用CSS3渐变的更多参考.