在第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

回答

相关问题