Eu estou tentando alcançar um estilo típico em uma div, dividindo-o em duas metades e, em seguida, criando uma diagonal no meio para que fique bem. Captura de tela abaixo:

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

Foi assim que eu fiz isso. Agora, meu problema é que, como tenho essa diagonal lá, está aumentando a parte vermelha. E isso não parece bom em telas menores. Como usar a propriedade gradiente linear para que não seja 50% 50%; em vez disso, é algo como 40% 60%, para que a diagonal não faça muita diferença. Quando tento 40% a 60% na propriedade gradiente, está misturando os gradientes, o que é lógico. Como fazer isso funcionar?