title: Use linear gradient in CSS to split div in 2 colors but not in equal halves
body: <p>I am trying to achieve a typical style in a div by splitting it into 2 halves and then creating a diagonal in between so it looks good. Screenshot below:</p>
  
  <p><img src="https://i.stack.imgur.com/sP7nK.png" alt="This is what I am trying to do"></p>
  
  <pre><code>&lt;div class="contact hidden-xs"&gt;
      &lt;div class="diagonal"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  .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;
  }
  </code></pre>
  
  <p>This is how I have done this. Now my problem is that since I have that diagonal there, it is making the red part bigger by that much. And it does not look good in smaller screens. How do use the linear gradient property so that it is not 50% 50%, instead it is something like 40% 60%, so that the diagonal doesn't make much difference. When  I try 40% 60% in the gradient property it is mixing up the gradients which is only logical. How to make this work?</p>