Как сделать перевернутый параллелограмм средствами CSS?

Question

[Jack London]

В интернете полно гайдов как сделать параллелограмм, но нигде нет перевернутого параллелограмма, посидел пару часов ничего не получается, может Вы подскажите, буду очень благодарен! На картинке черным цветом нарисовано как бы контейнер сайта, а синим параллелограммы что мне надо, приблизительно:

Answer 1

[Jack London]

Сложно все это решить, когда ширина блока должна быть резиновая... нужно либо писать много кода, либо canvas'ами выкручиваться, поэтому средствами css задачу не решить, буду просто вставлять картинку на фон, заказчик все равно не отличит)))

Answer 2

[indigo_style]

codepen.io/anon/pen/RoQbLb?editors=1100#0

Comments

[Jack London]

спасибо за ответ, да такой вариант рабочий если ширина блока фиксированная (100px), но никак не резиновая (100%)

Answer 3

[Кирилл]

Трансформации вам в помощь https://html5book.ru/css3-transform/, но возможно, что края блоков будут выглядеть неочень)

Comments

[Jack London]

спасибо за Ваш ответ, но это проблему не решило)