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

Question

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

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

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

如何制作相同的渐变但使用纯色而不会在颜色之间转换？ （使用CSS）

类似的东西：

感谢

Answer 1

喜欢这个

＆＃13;

＆＃13;

.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%
  );
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

1. 颜色#00ae00将应用到33.3%
的div
2. 从那时起66.6%，white将被应用
3. 最后orange将从66.6%开始直到方框结束

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

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

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