Как сверстать макет диагональными блоками?

Question

[eightalex]

Дали задание сверстать макет, в нем несколько блоков расположено под углом, дочерние элементы располагаются вертикально. Под этими полосами и над ними тоже находится информация, которая должна быть точно с ними сопоставлена, иначе задумка дизайнера не воплотится. Так же в макете присутствуют такие же полосы, но без информации внутри и гораздо уже. Информация не должна масштабироваться под размеры экрана, но сами полосы должны занимать всю видимую область.

На ум не приходит ни одного решения, не требующего костылей. Использовать transform, или же лучше сделать это с помощью background, четко позиционируя дочерние блоки? Может подложить еще один блок под обычную сетку (см. картинка 2)?

Answer 1

[Андрей Федоров]

делайте градиентами
codepen.io/aliencash/pen/pgRYLJ

Answer 2

[Nathan Stark]

а почему бы у блока не сдлеать background ? т.е. это силнее картинкой однотонной и спозиционировать

Comments

[eightalex]

Так не получится, потому что полосы должны выходить за границы макета и если они будут растягиваться, то не будут совпадать положения полосы и текста на ней. i.piccy.info/i9/a619fdb9209db88519b2e75eaa08fc56/1...

Answer 3

[profesor08]

Ой, задумка дизайнера? Окай.
1. Спряч все надписи.
2. Если фотошоп, то Ctrl + Alt + Shift + S -> Сохранить картинкой
3. В HTML Картинку на фон, поверх картинки блоки с текстом. Стили для текста сгенерировать тем-же фотошопом.
4. Маштабировать все это дело по ширине 100%
5. Учитывая требования - все готово.

Comments

[eightalex]

Так не получится, потому что полосы должны выходить за границы макета. i.piccy.info/i9/a619fdb9209db88519b2e75eaa08fc56/1...