title: css - triangle borders 100% of screen
body: <p><strong>Desired result:</strong></p>
  
  <p>A CSS solution where I have a container with <code>width: 100%;</code>, and above and below the container, I have triangles attached that create a parallelogram. The triangles should cover the entire width of the screen.</p>
  
  <p><strong>Problem</strong></p>
  
  <p>I tried with <code>transform</code>, but that also transforms the text inside the container, so that doesn't work to create the desired form. Right now I'm trying with 2 divs, 1 above and 1 under the container, and with <code>border-right</code> css property. The problem here is that it doesn't accept percentages.</p>
  
  <p><strong>Code</strong></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="triangleUP"&gt;&lt;/div&gt;
  &lt;article class="blue"&gt;
      Lorem ipsum (times 200)
  &lt;/article&gt;
  &lt;div class="triangleDOWN"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.triangleUP {
      width: 0;
      height: 0;
      border-top: 250px solid transparent;
      border-right: 1920px solid #344cd0;
      overflow:hidden;
  }
  .blue{
      background-color:#344cd0;
      color:white;
  }
  .triangleDOWN{
      width: 0;
      height: 0;
      border-top: 250px solid #344cd0;
      border-right: 1920px solid transparent;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/0g02gwL2/" rel="nofollow">JSFiddle</a></p>
  
  <p>I know that with jQuery I could easily manipulate the property, but I'd prefer to keep it CSS only. </p>