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

Question

我知道在这方面有一些关于此的问题，但我发现大多数问题涉及背景分为两种颜色。我无法弄清楚如何定制它以适应我想要做的事情。

我需要这样的背景：

到目前为止，无论我尝试过什么，我似乎无法做到这一点，以至于另一条线朝着相反的方向发展。有人可以帮帮我吗？

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

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

    = 'Billed Days'/sum('Total Days')

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

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>

Answer 2

以下是一个示例，您可以根据需要调整定位和颜色。 实际上你可以使用具有多个背景的1个元素。请注意我已删除background-color

＆＃13;

＆＃13;

.background {
  height: 400px;

  background-image: -webkit-linear-gradient(-78deg, #894325 70%, transparent 30%), -webkit-linear-gradient(78deg, transparent 70%, red 30%);
  background-repeat: no-repeat, no-repeat;
  background-position: top left, 0 200px;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;