title: Diagonal shape 100% height CSS
body: <p>Alright, here is the thing. This is what I'm trying to accomplish, which I did so far:</p>
  
  <p><a href="https://i.stack.imgur.com/7trnq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7trnq.png" alt="full height diagonal shape"></a></p>
  
  <p>The problem is I use hardcoded pixels right now, but it really needs to be more responsive. So it needs a height of 100% (not 200px like now). And the total width of the <strong>diagonal</strong> and <strong>content</strong> containers needs to be 50%, like the image above (so not hardcoded 100px like now). The main problem seems to be the diagonal, cause it almost seems I can only use pixels and not percentages. So if the content block gets more content, it will expand, but the diagonal will not, which is a problem.</p>
  
  <p>It looks like a position absolute could fix it, but then I can't really place the content and diagonal blocks next to each other anymore. Now I gave them two different colors to be clear, but in the live example they need to look like one shape with the same background color.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.shape {
    width:400px;
    margin:0 auto;
    display: block;
    height: 200px;
    position: relative;
    background-image: url('https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSQdX7yx0pVXUlaNF7WkbSJpZp5r0TflV3WdsojKKK1Xon_1hh08l4OL1yd');
    
  }
  .diagonal {
    height:0;
    border-width: 0px 0 200px 100px;
    border-style:solid;
    border-color: transparent transparent transparent #d71f55 ;
    float: left;
    
  }
  .content {
    height: 100%;
    width: 100px;
    background-color: #888;
    float: left;
    color: #fff;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="shape"&gt;
    &lt;div class="content"&gt;
      Content goes here
      Like this
    &lt;/div&gt;
    &lt;div class="diagonal"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <h3>EDIT:</h3>
  
  <p>By the way, I already tried using two backgrounds as well, like:</p>
  
  <pre><code> background-color: #f87f73;
    background-image: -webkit-linear-gradient( -28deg, #f87f73 0%, #f87f73 60%, #292423 60%, #292423 60%);
    background-image: linear-gradient( -28deg, #f87f73 0%, #f87f73 60%, #292423 60%, #292423 60%);
  </code></pre>
  
  <p>But that really got ugly. Too pixelated.</p>
  
  <h3>Edit 2:</h3>
  
  <p>Browser which needs to be supported:</p>
  
  <ul>
  <li><p>OS: windows 8/10 : 
  ** browsers: Chrome 47/48
  ** Firefox 43/44
  ** Internet Explorer 11</p></li>
  <li><p>OS: mac OSX 10.9/10.10
  ** Chrome 47/48
  ** Firefox 43/44
  ** Safari 8/9</p></li>
  <li><p>OS: android 5/6
  ** Chrome latest version</p></li>
  <li><p>OS: iOS 8/9
  ** Safari latest version</p></li>
  </ul>