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

Question

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

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

请帮助我找到一个只用一个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%);

结果如下：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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渐变here的更多参考资料。

Answer 2

我认为应用渐变色可以解决您的问题。试试这个div的背景。

$("#gear").click(function(){
startangle=0;
endangle=90;
 mov(this,startangle,endangle);
}
function mov(that, start, end){
if(start<end){
start++;
$(that).rotate(start);
setTimeout(()=>{mov(that,start,end)},100);
}
}

您可以从here

生成更多需要的渐变