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

<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% в свойстве градиента, он смешивает градиенты, что логично. Как заставить это работать?