如何使用linear-gradient将div背景从左到右分割为3个纯色块

要实现无过渡的硬边分块背景，核心逻辑是给相邻色块设置相同的色标位置即可消除渐变过渡效果，具体实现代码如下：

.target-div {
  /* 核心渐变属性配置 */
  background: linear-gradient(
    to right,
    green 0%,
    green 40%,
    blue 40%,
    blue 60%,
    red 60%,
    red 100%
  );
}

参数说明 #

• 首参数to right指定渐变方向为从左到右，符合从左到右分块的需求
• 绿色色标从0%延伸到40%，所以左侧40%宽度全部为纯色绿色，无渐变
• 蓝色色标从40%延伸到60%（刚好占总宽度20%），中间区域全部为纯色蓝色
• 红色色标从60%延伸到100%，右侧40%宽度全部为纯色红色

你也可以使用简化写法，省略首尾默认的0%和100%参数，效果完全一致：

.target-div {
  background: linear-gradient(
    to right,
    green 40%,
    blue 40%,
    blue 60%,
    red 60%
  );
}

内容的提问来源于stack exchange，提问作者Bear Bile Farming is Torture