@eightalex

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

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

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

624d505aff0c4d829b6284cfb9fbb9ee.png58001d5004c14ab4989a82add7556388.png
  • Вопрос задан
  • 526 просмотров
Решения вопроса 1
aliencash
@aliencash
Партизан
делайте градиентами
codepen.io/aliencash/pen/pgRYLJ
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
@MattLe
а почему бы у блока не сдлеать background ? т.е. это силнее картинкой однотонной и спозиционировать
Ответ написан
profesor08
@profesor08 Куратор тега CSS
Ой, задумка дизайнера? Окай.
1. Спряч все надписи.
2. Если фотошоп, то Ctrl + Alt + Shift + S -> Сохранить картинкой
3. В HTML Картинку на фон, поверх картинки блоки с текстом. Стили для текста сгенерировать тем-же фотошопом.
4. Маштабировать все это дело по ширине 100%
5. Учитывая требования - все готово.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы