Как сделать фон с двумя диагональными линиями CSS в противоположном направлении?

Question

Я знаю, что по этому поводу есть несколько вопросов по SO, но большинство из них касаются фона, разделенного на два цвета. И я не могу понять, как настроить это, чтобы соответствовать тому, что я пытаюсь сделать.

Мне нужен такой фон:

И до сих пор, что бы я ни пытался, я не могу сделать так, чтобы другая линия шла в противоположном направлении. Кто-нибудь может мне помочь, пожалуйста?

Вот что я получил до сих пор:

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

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

Это не выглядит удаленно, как должно? Я использую неправильный подход или? Спасибо!

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

.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;
}

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