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

【问题标题】：How to color a single div with 3 different colors? (one third blue, one third white, one third red)如何用 3 种不同的颜色为单个 div 着色？（三分之一蓝，三分之一白，三分之一红）
【发布时间】：2017-02-07 06:50:36
【问题描述】：

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

但它不适用于 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>

【问题讨论】：

为什么不能只使用 3 个 div？

标签： html css background-color

【解决方案1】：

这很容易使用 stops 完成。诀窍是拥有两个相同的色标，您可以让一种纯色立即变为另一种纯色。

看看这个：

 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。

【讨论】：

谢谢，这就是我想要的
你能解释一下吗？它是如何工作的？为什么这是错误的background: linear-gradient(to right, #002395 33.33%, white 33.33%, #ed2939 33.33%);
您必须在此处使用停止，以便纯色在渐变中立即过渡。如果您可以阅读可以解释答案的文档，特别是this section。

【解决方案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 生成更多您需要的渐变

【讨论】：