title: Responsive diagonal line in CSS/HTML
body: <p>What I'm trying to achieve is to have a diagonal line go from a bottom border, to a top border, behind a nav box and have two different background colours on each side of the diagonal.</p>
  
  <p>And, to top it off, it needs to be responsive.</p>
  
  <p>Hopefully this makes sense, if it doesn't, heres an image.</p>
  
  <p>In the image, the bottom-left diagonal comes out too far, it would end in line with the left nav box element, so could use the location of each of the corners as anchors.</p>
  
  <p><img src="https://i.stack.imgur.com/NmbgY.jpg" alt="enter image description here"></p>
  
  <p>More than happy to use whatever method is proposed. </p>
  
  <p>Thanks! </p>
  
  <p><strong>EDIT</strong> I can make a parallelogram in css pretty easy but it is not responsive. </p>
  
  <pre><code>#parallelogram {
      width: 700px;
      height: 200px;
      -webkit-transform: skew(-40deg);
      background: red;
      margin-left: 100px;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/cbiggins/fVeDD/" rel="nofollow noreferrer">http://jsfiddle.net/cbiggins/fVeDD/</a></p>
  
  <p><strong>EDIT 2</strong> Updated fiddle, now calculating angle and applying change on resize. Note this only works on Chrome (and Safari?) atm. </p>
  
  <p><a href="http://jsfiddle.net/cbiggins/fVeDD/5/" rel="nofollow noreferrer">http://jsfiddle.net/cbiggins/fVeDD/5/</a></p>
  
  <p>We might be leaving it now though, I'm not sure how feasible this is now with the time constraints we have in our current project. </p>