Используйте линейный градиент в CSS, чтобы разделить div на 2 цвета, но не на равные половины

Я пытаюсь добиться типичного стиля в div, разделив его на 2 половины, а затем создав диагональ между ними, чтобы он выглядел хорошо. Скриншот ниже:

Это то, что я пытаюсь сделать.

<div class="contact hidden-xs">
    <div class="diagonal"></div>
</div>

.contact{
    width: 100%;
    height: 500px;
    background: linear-gradient(to right, #f87f73 50%, #292423 50%)
}

.diagonal{
    margin-left: 50%;
    width: 0px;
    border-width: 500px 200px 0px 0px;
    border-style: solid;
    border-color: #f87f73 transparent transparent transparent;
}

Это, как я сделал это. Теперь моя проблема в том, что поскольку у меня есть эта диагональ, она делает красную часть больше на столько. И это не очень хорошо смотрится на небольших экранах. Как использовать свойство линейного градиента, чтобы оно не было 50% 50%, а было чем-то вроде 40% 60%, так что диагональ не имеет большого значения. Когда я пытаюсь 40% 60% в свойстве градиента, это смешивает градиенты, что только логично. Как заставить это работать?

2 2
css css3 linear-gradients

2 ответа:

Я думаю, что этот код произведет эффект, подобный вашему снимку экрана.

Поместите этот код в селектор, который вы хотите тоже выглядеть как снимок экрана.

  background-color: #f87f73;
  background-image: -webkit-linear-gradient( -28deg, #f87f73 0%, #f87f73 60%, #292423 60%, #292423 60%);
  background-image: linear-gradient( -28deg, #f87f73 0%, #f87f73 60%, #292423 60%, #292423 60%);
6

Это можно сделать с помощью border и flexbox

Фрагмент 

.content {
  width: 100%;
  background-color: grey;
  display: flex;
  justify-content: flex-end
}

.diagonal {
  border-bottom: 100px solid red;
  border-left: 75px solid rgba(0, 0, 0, 0);
  height: 0;
  width: 30%;
}
<div class="content">
  <div class="diagonal"></div>
</div>
Пожалуйста, обратите внимание, что вы можете изменить width по мере необходимости.
1