在第3部分拆分div

我必須用css做一個足球隊的盾牌，這個想法是圍繞團隊的顏色做一個圓圈，我已經爲1或2種顏色的盾牌做了圓圈，但是我遇到了3色盾牌在第3部分拆分div

我使用這2個色屏蔽

.equipo{ 
 
    border-radius: 50%; 
 
    vertical-align: middle; 
 
    border: 1px solid #333333; 
 
    box-sizing: border-box; 
 
    width: 25px; 
 
    height: 25px; 
 
    background-image: linear-gradient(to right, #01135B 50%, #FFFFFF 50%); 
 
    background-image: -o-linear-gradient(left, #01135B 50%, #FFFFFF 50%); 
 
    background-image: -moz-linear-gradient(left, #01135B 50%, #FFFFFF 50%); 
 
    background-image: -webkit-linear-gradient(left, #01135B 50%, #FFFFFF 50%); 
 
    background-image: -ms-linear-gradient(left, #01135B 50%, #FFFFFF 50%); 
 
    display: inline-block; 
 
}

<div class="equipo"></div>

，但我想它有3個顏色，我嘗試這一點，但它不工作

.equipo{ 
 
    border-radius: 50%; 
 
    vertical-align: middle; 
 
    border: 1px solid #333333; 
 
    box-sizing: border-box; 
 
    width: 25px; 
 
    height: 25px; 
 
    background-image: linear-gradient(to right, #01135B 20%, #FFFFFF 50%, #DF0408 30%); 
 
    background-image: -o-linear-gradient(left, #01135B 20%, #FFFFFF 50%, #DF0408 30%); 
 
    background-image: -moz-linear-gradient(left, #01135B 20%, #FFFFFF 50%, #DF0408 30%); 
 
    background-image: -webkit-linear-gradient(left, #01135B 20%, #FFFFFF 50%, #DF0408 30%); 
 
    background-image: -ms-linear-gradient(left, #01135B 20%, #FFFFFF 50%, #DF0408 30%); 
 
    display: inline-block; 
 
}

<div class="equipo"></div>

我必須做的，我想3種或更多的顏色？

來源

2016-12-28 Alejandro Velasco Soto

你是什麼意思是「沒有做工作」？讀者對你的問題可能更具體一些。 – halfer

嗨Halfer我的英語能力是如此基本，當我說「不工作」我的意思是它看起來不像我想要的，但問題解決了，非常感謝你 –

好吧，很高興你解決了它！就這樣，你知道，「它不起作用」就像一個炸藥棒，並有充分的理由。除了你不開心之外，它實際上並沒有傳達有關問題的任何信息。總是嘗試添加（1）你所期望的，以及（2）你取而代之的。希望有所幫助！ – halfer

試試這只是添加新的線性漸變，這是重寫您的造型，如果這是你正在尋找你可以刪除上梯度。還添加了許多顏色的替代品。

.equipo{ 
 
    border-radius: 50%; 
 
    vertical-align: middle; 
 
    border: 1px solid #333333; 
 
    box-sizing: border-box; 
 
    width: 25px; 
 
    height: 25px; 
 
    background-image: linear-gradient(to right, #01135B 20%, #FFFFFF 50%, #DF0408 30%); 
 
    background-image: -o-linear-gradient(left, #01135B 20%, #FFFFFF 50%, #DF0408 30%); 
 
    background-image: -moz-linear-gradient(left, #01135B 20%, #FFFFFF 50%, #DF0408 30%); 
 
    background-image: -webkit-linear-gradient(left, #01135B 20%, #FFFFFF 50%, #DF0408 30%); 
 
    background-image: -ms-linear-gradient(left, #01135B 20%, #FFFFFF 50%, #DF0408 30%); 
 
    display: inline-block; 
 
    background-image: -o-linear-gradient(top, #a8e9ff 0%, #052afc 25%,#ff8d00 100%); 
 
    background-image: -ms-linear-gradient(top, #a8e9ff 0%, #052afc 25%,#ff8d00 100%); 
 
    background-image: -webkit-gradient(linear, right top, right bottom, color-stop(15%,#a8e9ff), color-stop(32%,#052afc),color-stop(90%,#ff8d00)); 
 
} 
 

 
.grad { 
 
    background-image: -moz-linear-gradient(to right, red, #f06d06, rgb(255, 255, 0), green, blue, gray, purple); 
 
    background-image: -webkit-linear-gradient(to right, red, #f06d06, rgb(255, 255, 0), green, blue, gray, purple); 
 
    background-image: linear-gradient(to right, red, #f06d06, rgb(255, 255, 0), green, blue, gray, purple); 
 
}

<div class="equipo"></div> 
 
<div class="equipo grad"></div>

來源

2016-12-28 03:18:22 aavrug

謝謝Aavrug，bi需要像Ganesh Putta評論 –

@AlejandroVelascoSoto很高興聽到至少你有一個解決方案爲你的問題，這是每個人的主要目標在計算器:) – aavrug

再次添加相同的顏色，如果一個人在30％結束，下一個應該開始在30％，
像這樣：-moz-linear-gradient(left center , #01135b 30%,#ffffff 30%,#ffffff 65%, #df0408 30%)

這將基本上在前面的顏色上形成硬邊/停止

.equipo { 
 
    border-radius: 50%; 
 
    vertical-align: middle; 
 
    border: 1px solid #333333; 
 
    box-sizing: border-box; 
 
    width: 25px; 
 
    height: 25px; 
 
    display: inline-block; 
 
    
 
    background: -moz-linear-gradient(left center , #01135b 32%, #ffffff 32%, #ffffff 66%, #df0408 66%); 
 
    
 
}

<div class="equipo"></div>

應用同樣的原理來休息。

來源

2016-12-28 03:18:45 pol

非常感謝你！ –

這是CSS漸變的性質，以及像漸變一樣。具有不混合的離散顏色的技巧是使混合區域沒有寬度。這是通過將兩種顏色放在漸變的同一點上完成的，如下所示。

.equipo { 
 
    border-radius: 50%; 
 
    vertical-align: middle; 
 
    border: 1px solid #333333; 
 
    box-sizing: border-box; 
 
    width: 25px; 
 
    height: 25px; 
 
    background-image: linear-gradient(left, #01135B 33%, #FFFFFF 33%, #FFFFFF 67%, #DF0408 67%); 
 
    background-image: -o-linear-gradient(left, #01135B 33%, #FFFFFF 33%, #FFFFFF 67%, #DF0408 67%); 
 
    background-image: -moz-linear-gradient(left, #01135B 33%, #FFFFFF 33%, #FFFFFF 67%, #DF0408 67%); 
 
    background-image: -webkit-linear-gradient(left, #01135B 33%, #FFFFFF 33%, #FFFFFF 67%, #DF0408 67%); 
 
    background-image: -ms-linear-gradient(left, #01135B 33%, #FFFFFF 33%, #FFFFFF 67%, #DF0408 67%); 
 
    display: inline-block; 
 
}

<div class="equipo"></div>

來源

2016-12-28 03:20:03 Quinn

這裏我工作了一個標誌，這是與您的要求，試試這個

.flag-sample { 
 
    border-radius: 50%; 
 
    border: 1px solid #333333; 
 
    width: 100px; 
 
    height: 100px; 
 
    display: block; 
 
    background: -moz-linear-gradient(left center , #01135b 33%, #ffffff 33%, #ffffff 66%, #df0408 66%); 
 
    
 
}

<div class="flag-sample"></div>

來源

2016-12-28 05:12:03

非常感謝你，只是我需要它，我有最後一個問題，如果我需要4種顏色，它們都具有相同的尺寸，應該怎麼做。再次感謝你 –

在第3部分拆分div

回答

相關問題