如何使用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