Page Slant Dividers

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

Answer 2

尝试此代码DEMO

我希望我能帮到你

  *,
    *: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: 34px;
        left: 39%;
        z-index: -1;
        width: 150%;
        height: 75%;
        background: inherit;
        -webkit-transform: rotate(-180deg);
        transform: rotate(-180deg);
        -webkit-transform-origin: 263px 63px 0;
        transform-origin: 263px 63px 0;
    }

    .ss-style-doublediagonal::before {
        height: 28%;
        background: blue;
        -webkit-transform: rotate(-178deg);
        transform: rotate(-178deg);
        -webkit-transform-origin: 28% 0;
        transform-origin: 28% 0;
    }

Answer 3

请检查此FIDDLE

*,
*: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: yellow;
    color: #fff;
    text-align: center;
}

.color {
    background: yellow;
}

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

.ss-style-doublediagonal::before,
.ss-style-doublediagonal::after {
    top: 0;
    left: -25%;
    z-index: -1;
    width: 150%;
    height: 75%;
    background: inherit;
    -webkit-transform: rotate(4deg);
    transform: rotate(4deg);
    -webkit-transform-origin: 76% 0;
    transform-origin: 76% 0;
}

.ss-style-doublediagonal::before {
    height: 50%;
    background: blue;
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg);
    -webkit-transform-origin: 105% 0;
    transform-origin: 105% 0;
}
.container {
-webkit-transform: rotate(180deg) !important;
}

我猜这解决了.......