html - 页面倾斜分隔线

我已经设法做了从右到左的倾斜边缘，就像这样：DEMO，我现在要做的就是把它颠倒过来，例如，当这个在左边变大到在右边变小时，我需要它在右边变大到在左边变小。基本上和我现在的情况相反。
这是HTML：

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

这里是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;
}

非常感谢您的帮助。

最佳答案

我要告诉你我到底改变了什么。
Updated Fiddle

transform: rotate(2deg); /* was -2deg, rotating the other way now */
transform-origin: 100% 0; /* was 0 0, rotating from the other side */

以及：

transform: rotate(3deg); /* was -3deg, rotating the other way */
transform-origin: 97% 0; /* was 3% 0, rotating from the other side */

关于html - 页面倾斜分隔线，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/25116840/