css - 如何用相反方向的CSS制作两条对角线背景？

Question

我知道关于这个有一些关于 SO 的问题，但我发现大多数问题都处理背景分成两种颜色。而且我不知道如何定制它以适应我想要制作的东西。

我需要这样的背景：

到目前为止，无论我尝试了什么，我似乎都无法让另一条线朝相反的方向前进。有人可以帮帮我吗？

这是我到目前为止得到的：

.background {
  height: 500px;
  background-color: #894325;
  background-image: -webkit-linear-gradient(-78deg, #894325 70%, #e9e9e9 30%);
}

<div class="background">
</div>

它看起来不像它应该的那样遥远？我使用了错误的方法还是？谢谢！

标签： css

Answer 1

使用两个渐变，例如：

.background {
  height: 500px;
  background-color: #894325;
  background: linear-gradient(172deg, rgba(137, 67, 37, 1) 50%, transparent 50%), linear-gradient(8deg, transparent 50%, rgba(233, 233, 233, 233) 50%);
}

<div class="background">
</div>