CSS - треугольник границ 100% экрана

Question

Желаемый результат:

CSS-решение, в котором у меня есть контейнер с width: 100%;, а выше и ниже контейнера, у меня есть треугольники, прикрепленные которые создают параллелограмм. Треугольники должны покрывать всю ширину экрана.

Проблема

Я попытался с transform, но и преобразует текст внутри контейнера, так что не работает, чтобы создать нужную форму. Прямо сейчас я пытаюсь с 2 divs, 1 выше и 1 под контейнером, и с border-right css. Проблема здесь в том, что она не принимает проценты.

Код

HTML:

<div class="triangleUP"></div> 
<article class="blue"> 
    Lorem ipsum (times 200) 
</article> 
<div class="triangleDOWN"></div> 

CSS:

.triangleUP { 
    width: 0; 
    height: 0; 
    border-top: 250px solid transparent; 
    border-right: 1920px solid #344cd0; 
    overflow:hidden; 
} 
.blue{ 
    background-color:#344cd0; 
    color:white; 
} 
.triangleDOWN{ 
    width: 0; 
    height: 0; 
    border-top: 250px solid #344cd0; 
    border-right: 1920px solid transparent; 
} 

JSFiddle

Я знаю, что с JQuery я мог бы легко манипулировать собственностью, но я бы предпочитают держать CSS только.

Answer 1

Возможное решение здесь - использовать 100vw, что составляет 100% от ширины окна просмотра. Вот table of current browser support.

Новый CSS:

.triangleUP { 
width: 0; 
height: 0; 
border-top: 250px solid transparent; 
border-right: 100vw solid #344cd0; 
overflow:hidden; 
} 
.blue{ 
    background-color:#344cd0; 
    color:white; 
} 
.triangleDOWN{ 
    width: 0; 
    height: 0; 
    border-top: 250px solid #344cd0; 
    border-right: 100vw solid transparent; 
} 

Результат: