html - 页面倾斜分隔线

Question

我已经设法像这样从右到左做斜边形式: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;
}

非常感谢任何帮助。

Answer 1

我要告诉你我实际改变了什么。

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 */