如何用linear-gradient实现绿色与红色矩形的错位布局

可以通过多层线性渐变精确控制各色块的位置和尺寸，完全用百分比定义，不依赖容器固定高度，代码修改如下：

#div_1 {
  width: 200px;
  min-height: 35px;
  background: 
    /* 红色底部长条：占满宽度，高度10%，贴容器底部 */
    linear-gradient(red, red) bottom / 100% 10% no-repeat,
    /* 绿色上方条：水平从15%到80%，高度12%，贴红色条顶部（距离底部10%） */
    linear-gradient(green, green) bottom 10% left 15% / 65% 12% no-repeat,
    /* 左侧蓝色块：宽度10%，高度和红色一致，贴底部左侧 */
    linear-gradient(blue, blue) bottom left / 10% 10% no-repeat,
    /* 右侧蓝色块：宽度10%，高度和红色一致，贴底部右侧 */
    linear-gradient(blue, blue) bottom right / 10% 10% no-repeat;
}

<div id="div_1"></div>

关键调整说明： #

• 红色矩形：通过bottom / 100% 10%实现全宽、占容器高度10%的底部长条，确保水平范围覆盖整个容器。
• 绿色矩形：
  • bottom 10%让绿色的底部紧贴红色的顶部（红色高度10%，距离容器底部10%），满足“起始位置更低”的要求；
  • left 15% / 65%控制绿色的水平范围：从左侧15%开始，宽度占容器的65%（到右侧15%结束），自然比红色的水平范围更短，符合“结束位置早于红色矩形”的需求；
  • 高度设为12%，让绿色在红色上方形成独立的色块。
• 左右蓝色块：分别贴容器底部的左右两侧，宽度各10%，高度和红色保持一致，还原需求中的侧边蓝色区域。

内容的提问来源于stack exchange，提问作者postFix