title: Page Slant Dividers
body: <p>I have manage to do the slant edge form right to left like so: <a href="http://jsfiddle.net/dawidvdh/637mr/1/" rel="nofollow"><strong>DEMO</strong></a>, All i am trying to do now is reverse it, so for example where this one goes big on the left to small on the right i need it to go big on the right to small on the left. Basically the opposite of what i have currently.</p>
  
  <p>Here's the HTML:</p>
  
  <pre><code>&lt;div class="container"&gt;
              &lt;section class="color"&gt;&lt;/section&gt;
              &lt;section class="col-3 ss-style-doublediagonal"&gt;&lt;/section&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>Here's the CSS:</p>
  
  <pre><code>*,
  *:after,
  *::before {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
  }
  
  .container {
      overflow: hidden;
      /* we don't want the pseudo-elements sticking out */
  }
  
  section {
      position: relative;
      padding: 10em 10%;
      background: red;
      color: #fff;
      text-align: center;
  }
  
  .color {
      background: red;
  }
  
  /*** Individual section styles and separators ***/
  
  /* Common style for pseudo-elements */
  section::before,
  section::after {
      position: absolute;
      content: '';
      pointer-events: none;
  }
  
  
  /* Double Diagonal line */
  
  .ss-style-doublediagonal {
      z-index: 1;
      padding-top: 6em;
      background: yellow;
  }
  
  .ss-style-doublediagonal::before,
  .ss-style-doublediagonal::after {
      top: 0;
      left: -25%;
      z-index: -1;
      width: 150%;
      height: 75%;
      background: inherit;
      -webkit-transform: rotate(-2deg);
      transform: rotate(-2deg);
      -webkit-transform-origin: 0 0;
      transform-origin: 0 0;
  }
  
  .ss-style-doublediagonal::before {
      height: 50%;
      background: blue;
      -webkit-transform: rotate(-3deg);
      transform: rotate(-3deg);
      -webkit-transform-origin: 3% 0;
      transform-origin: 3% 0;
  }
  </code></pre>
  
  <p>Any Help Greatly Appreciated.</p>