如何用CSS制作反向双对角线背景？

嘿，我完全懂你的困扰！之前在SO上找的大多是单一方向的双色渐变背景，确实很难直接改成你要的反向斜线分割效果。别担心，咱们用CSS的多重线性渐变就能搞定！

核心思路是叠加两个角度相反的线性渐变，通过调整颜色的停止位置（stop position）来让它们形成反向的分割线。下面给你几个具体的实现方案：

方案1：细反向交叉线条 #

如果你想要的是细的反向斜线（类似交叉网格），可以用这个代码：

.background {
  height: 500px;
  background-color: #894325; /* 基础底色 */
  background-image: 
    /* 第一条-78度的斜线 */
    linear-gradient(-78deg, transparent 49.5%, #e6a875 49.5%, #e6a875 50.5%, transparent 50.5%),
    /* 第二条反向的78度斜线 */
    linear-gradient(78deg, transparent 49.5%, #c17649 49.5%, #c17649 50.5%, transparent 50.5%);
}

这里把颜色的停止范围设得很小（49.5%到50.5%），就能得到细线条；如果想要粗一点的线条，把这个范围扩大就行，比如45%到55%。

方案2：大块反向分割区域 #

要是你需要的是大的反向色块分割，比如背景被反向斜线分成多个区域，可以这样写：

.background {
  height: 500px;
  background-color: #894325;
  background-image:
    /* -78度方向的三色分割 */
    linear-gradient(-78deg, #894325 33%, #e6a875 33%, #e6a875 66%, #894325 66%),
    /* 反向78度方向的三色分割 */
    linear-gradient(78deg, #894325 33%, #c17649 33%, #c17649 66%, #894325 66%);
}

两个渐变角度相反，各自把背景分成三等分，叠加后就会形成交叉的反向分割色块。

你可以根据自己的需求替换颜色值和百分比，调整角度（比如把-78deg和78deg改成你需要的角度），就能得到想要的效果啦！

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