.blackDiagonalTop {
    height: 100px;
    /* overflow: hidden; */
}

.blackDiagonalTop::before {
    display: block;
    content: '';
    width: 100%;
    height: 100%;
    background-color: transparent;
    transform: skewY(calc(-1 * 3deg));
    transform-origin: bottom left;
}

.blackDiagonalTop::after {
    display: block;
    content: '';
    width: 100%;
    height: 100%;
    background-color: #000000;
    transform: skewY(calc(-1 * 3deg));
    transform-origin: bottom left;
}

.blackDiagonalBottom {
    height: 50px;
    /* overflow: hidden; */
    background-color: transparent;
}

.blackDiagonalBottom::before {
    display: block;
    content: '';
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    transform: skewY(calc(-1 * 3deg));
    transform-origin: bottom right;
}

.colorDiagonalTop {
    height: 100px;
    /* overflow: hidden; */
}

.colorDiagonalTop::before {
    display: block;
    content: '';
    width: 100%;
    height: 100%;
    background-color: white;
    transform: skewY(calc(-1 * 3deg));
    transform-origin: bottom left;
}

    .colorDiagonalTop::after {
        display: block;
        content: '';
        width: 100%;
        height: 100%;
        background-color: #e2e8f1;
        transform: skewY(calc(-1 * 3deg));
        transform-origin: bottom left;
    }

.colorDiagonalBottom {
    height: 100px;
    /* overflow: hidden; */
    background-color: #e2e8f1;
}

.colorDiagonalBottom::before {
    display: block;
    content: '';
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    transform: skewY(calc(-1 * 3deg));
    transform-origin: bottom right;
}

@media only screen and (max-width: 575px) {
    .blackDiagonalTop,
    .blackDiagonalBottom,
    .colorDiagonalTop,
    .colorDiagonalBottom {
        height: 50px;
    }
}