title: Divide a rectangle into 2 triangles along diagonal using css
body: <p>I want to make a div into 2 triangles (as shown in below, no problem if 1 is background of parent) upper one with one color and lower one with another. I dont mind how it is implemented but i want to do it in css (not javascript). I tried with css rotation, (code below), but its not responsive. In smaller or wider screen it is distorted . Any way to implement this in css?</p>
  
  <p><img src="https://i.stack.imgur.com/M2A8V.png" alt="image"></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    background: #eee;
  }
  
  .darker {
    position: fixed;
    top: -94%;
    left: -10%;
    width: 150%;
    height: 150%;
    background: #dd4f39;
    -webkit-transform: rotate(30deg);
            transform: rotate(30deg);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="darker"&gt;&amp;nbsp;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>