Наклонные полосы на странице ⇐ CSS

[Anonymous]

Мне хотелось бы, чтобы на странице были полноразмерные наклонные полосы; вот и все.
Вот что я сделал до сих пор:

Код: Выделить всё

html, body {
overflow-x: hidden;
margin: 0;
padding: 0;
}
body {
display: flex;
margin: 0;
padding: 0;
}

.flag-strip {
position: absolute;
width: 100vw;
height: 15px;
left: 0;
transform: rotate(-10deg);
z-index: 1;
}

.flag-strip.red {
background-color: #D90012;
top: 9%;
}

.flag-strip.blue {
background-color: #0033A0;
top: 10.5%;
}

.flag-strip.orange {
background-color: #F2A800;
top: 12%;
}

@media (max-width: 878px) {
.flag-strip.red {
top: 11%;
}

.flag-strip.blue {
top: 12.5%;
}

.flag-strip.orange {
top: 14%;
}
}

Код: Выделить всё

Но у пользователя не должно быть горизонтальной полосы прокрутки и полосок должен быть действительно полноразмерным — на странице не должно быть видимых окончаний.
Как я могу заставить это работать так?

Подробнее здесь: https://stackoverflow.com/questions/793 ... -on-a-page