使用CSS线性渐变(不是平滑的颜色)生成纯色

Question

假设我的线性CSS渐变如下所示:

background: linear-gradient(to right, red 0%, green 20%, blue 40%, purple 60%, yellow 80%, black 100%)

它将生成一个如下所示的CSS渐变:

如何制作相同的渐变但使用纯色而不会在颜色之间进行过渡？(使用CSS)

与此类似的东西:

谢谢

Answer 1

像这样

.gradient {
  width: 500px;
  height: 200px;
  background: linear-gradient(to right, 
      red    20%, 
      green  20%, 
      green  40%, 
      blue   40%, 
      blue   60%, 
      purple 60%, 
      purple 80%, 
      yellow 80%,
      yellow 100%
  );
}

<div class="gradient"></div>

Answer 2

通过混合颜色创建渐变.您可以通过指定每种颜色的范围来控制颜色的混合效果,如下面的示例所示.flag.在.flag:

1. 颜色#00ae00将被应用至33.3%的div
2. 从那时起66.6%,white将适用
3. 最后orange将从66.6%盒子的最后开始

这样您就可以根据需要添加任意数量的颜色.

但有一点需要记住,当度数是直的时,它看起来很好,如果你改变角度,在某些情况下,颜色的边缘可能看起来不平滑(取决于颜色和屏幕密度),你可以看到 .pixeleted

.flag{
  background: linear-gradient(to right, #00ae00 33.3%, white 33.3%, white 66.6%, orange 66.6%);


margin-right: 20px;
}

.pixeleted{
    background: linear-gradient(30deg, red 33.3%, black 33.3%, black 66.6%, red 66.6%);
}
    
div {
  width: 290px;
  height: 145px;
  border: 2px solid #999;
  display: inline-block;
}

<div class="flag"></div>
<div class="pixeleted"></div>