.test-container {
    height: 200px;
    position: relative;
    width: 100%;
}

#test-container:before {
    position: absolute;
    top: -29.17px;
    height: 58.35px;
    width: 100%;
    background: #FFC300;
    transform: skewY(-2deg);
    z-index: -1;
}

#test-container:after {
    position: absolute;
    bottom: -29.17px;
    height: 58.35px;
    width: 100%;
    background: #FFC300;
    transform: skewY(-2deg);
    z-index: -1;
}

#test-container-a {
    background: #FFC300;
    margin-top: calc(1 * (var(--test-container-a-width) * sin(2deg) / sin(88deg)));
    margin-bottom: calc(1 * (var(--test-container-a-width) * sin(2deg) / sin(88deg)));
}

#test-container-b {
    background: black;
    margin-top: calc(1 * (var(--test-container-b-width) * sin(2deg) / sin(88deg)));
    margin-bottom: calc(1 * (var(--test-container-b-width) * sin(2deg) / sin(88deg)));
}


.test-container:before,
.test-container:after {
    display: block;
    content: "";
    position: absolute;
    width: 100%;
    transform: skewY(-2deg);
    z-index: -1;
    height: 100%;
    background: inherit;
}

.test-container:before {
    transform-origin: top left;
    /*top: calc(-0.5 * (var(--test-container-a-width) * sin(2deg) / sin(88deg)));*/
}

.test-container:after {
    transform-origin: bottom right;
    /*bottom: calc(-0.5 * (var(--test-container-a-width) * sin(2deg) / sin(88deg)));*/
}