Page separators

I managed to make a rectangular shape from right to left like this: DEMO , all I'm trying now is to do it the other way around, so for example if this one goes big on the left to small on the right, I need it to fit from right to left to left. Basically the opposite of what I have.

Here's the HTML:

<div class="container">
            <section class="color"></section>
            <section class="col-3 ss-style-doublediagonal"></section>
        </div>

      

        
        
        
      

    

Here's the CSS:

*,
*: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;
}

      

        
        
        
      

    

Any help greatly appreciated.