如何使用纯CSS实现分割背景色布局 适配双三角交叠的页脚设计

方案1：优化渐变实现（兼容性最好） #

你当前用的线性渐变方案本身是可行的，只需要微调参数就能解决分界处锯齿、分割比例不自然的问题：

/* 小范围过渡避免硬边锯齿，同时保留清晰的分割效果 */
background: linear-gradient(120deg, #ba5459 49.5%, #97444c 50.5%);

• 优势：所有现代浏览器包括低版本IE都支持，代码量最少，不需要额外DOM元素
• 适用场景：不需要给分割色块加单独动效、需要兼容旧浏览器的场景

方案2：伪元素+clip-path实现（灵活度最高） #

如果后续需要调整交叠程度、给色块加动效，推荐用伪元素实现：

.footer {
  position: relative;
  overflow: hidden;
  min-height: 200px;
  background-color: #ba5459;
}
/* 右侧深色三角形 */
.footer::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #97444c;
  /* 调整polygon参数可以自由控制三角形的倾斜角度、交叠范围 */
  clip-path: polygon(55% 0, 100% 0, 100% 100%, 45% 100%);
  z-index: 1;
}
/* 页脚内容要设置更高层级避免被色块遮挡 */
.footer-content {
  position: relative;
  z-index: 2;
}

• 优势：两个色块独立可控，可以分别调整颜色、位置、透明度，甚至加过渡动效，修改交叠程度只需要调整clip-path的参数即可
• 适用场景：需要灵活调整设计效果、需要加交互动效的场景，注意该方案不兼容IE浏览器

方案3：双DOM元素拼接实现 #

如果需要在两个色块区域分别加不同的背景装饰、图片，可以直接用两个并排的DOM元素，分别设置clip-path裁剪为对应三角形，调整margin实现近乎交叠的效果，可定制化程度最高。

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