How to implement slanted ribbons across the full height of the page?

Question

css

Hello! There is a layout of the landing (in this case, just a diagram for demonstration):

Ribbons run through its entire height. I wanted to be smart with gradients - something like this . But here the problem is that the tapes do not go to the edges of the section, but continue each other. At the same time, they have a different color and they must adapt to a different amount of content in the section.
How to implement the idea?

Answer 1

Hello. As an option https://jsfiddle.net/udx25j4x/1/
Specified the direction of the gradient in degrees and set the background-position.
Try playing with the values.

Answer 2

as option
jsfiddle.net/soledar10/348Lpkdo