css - 将一个 div 分成 3 个部分

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>