Estoy tratando de lograr un estilo típico en un div dividiéndolo en 2 mitades y luego creando una diagonal en el medio para que se vea bien. Captura de pantalla a continuación:

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

Así es como he hecho esto. Ahora mi problema es que, dado que tengo esa diagonal allí, está haciendo que la parte roja sea más grande. Y no se ve bien en pantallas más pequeñas. ¿Cómo se usa la propiedad de gradiente lineal para que no sea 50% 50%, sino algo así como 40% 60%, de modo que la diagonal no haga mucha diferencia? Cuando intento 40% 60% en la propiedad de gradiente, está mezclando los gradientes, lo cual es lógico. ¿Cómo hacer que esto funcione?