title: Creating an angled CSS3 divider - 100% / Auto height
body: <p><strong>I have checked these two posts: <a href="https://stackoverflow.com/questions/10568334/adjacent-divs-with-angled-borders">Adjacent divs with angled borders? [duplicate]</a> and <a href="https://stackoverflow.com/questions/30441122/shape-with-a-slanted-side-responsive">Shape with a slanted side (responsive)</a> but those solutions posted do not adjust to 100% height of the container and I need this. I cannot find a solution to fit my scenario.</strong></p>
  
  <p>I'm trying to replicate this behaviour the difference is the text inside this container can be of any height so I need the angle and container to adapt to fit any height (not a fixed height container):</p>
  
  <p><a href="https://i.stack.imgur.com/KlJrc.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KlJrc.jpg" alt="enter image description here"></a></p>
  
  <p>Here's the code I'm using with a jSFiddle: <a href="https://jsfiddle.net/qzma0r6k/1/" rel="nofollow noreferrer">https://jsfiddle.net/qzma0r6k/1/</a></p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>section {
      position: relative;
      color: #fff;
  }
  .diagonal:before {
      position: absolute;
      content:'';
      -webkit-transform: rotate(45deg);
      transform: rotate(45deg);
      -webkit-transform-origin: 0 100%;
      transform-origin: 0 100%;
      top: 0;
      right:0;
      height:100%;
      z-index: 0;
      width: 50%;
      background:pink;
  }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;section class="c-1"&gt;
    &lt;div class="c-2 diagonal"&gt;
      &lt;h1&gt;Work with us&lt;/h1&gt;
      &lt;p&gt;Scelerisque et parturient dis a erat cubilia congue sociosqu vel porta sem posuere a malesuada suspendisse id commodo. Dui consequat consectetur luctus odio nibh a vel sapien hendrerit ad a consectetur cursus a nisl posuere.&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="bg-image"&gt;&lt;/div&gt;
  &lt;/section&gt;
  </code></pre>