在3节中拆分一个div

Question

我必须用css做一个足球队的盾牌，这个想法是用团队颜色做一个圆圈我已经用1或2种颜色的盾牌做了圈子但是我遇到了3色盾牌的麻烦

我用它来制作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种或更多颜色？

Answer 1

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>

Answer 2

再次添加相同的颜色，如果一个以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>

将相同的原则应用于其余部分。

Answer 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;
  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>

Answer 4

在这里，我为一个国旗工作，这与你的要求相同，试试这个

.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>