如何使用3种不同颜色对单个div进行着色？ （三分之一蓝色，三分之一白色，三分之一红色）

Question

我知道我们可以用不同的颜色将一半的颜色分成一半。对于只有两种颜色，答案在这里： How to color a div half blue, half yellow?

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

div{ 
 
    \t width:400px; 
 
    \t height:220px; 
 
    \t 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{ 
 
    \t width:400px; 
 
    \t height:220px;  \t 
 
     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{ 
 
    \t width:400px; 
 
    \t height:220px; 
 
    \t 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渐变here一些参考。

Answer 2

我认为应用渐变颜色将解决您的问题。试试这个为你的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); 
} 

可以生成你需要从here