Есть идеи как сверстать нестандартный дизайн (контент будет меняться т.е нужно учесть адаптивность по вертикали)?

Question

[tripcollor]

Есть такой дизайн. Все картинки и линии в векторе

Дизайн макета

Вся сложность, как мне кажется в этих соеденительных линиях + нужно сверстать с учетом того что сайт будет на админке и контент может поменяться, т.е блоки по высоте могут растягиваться и сужаться (но линии естественно должны оставаться невредимыми и целостными) ну и естественно адаптивность под мобильные и остальные.
Есть идеи как реализовать?

Answer 1

[Конан Варвар]

В целом все просто.
Верстаете как обычно. А с соединяющими линиями придется немного пошаманить.
По сути получается что если контент будет меняться, то это будет отражаться только на вертикальных линиях, чтобы они не ломались вам нужно их зарипитить. Вкратце как-то так. Больше - это уже начало разработки вашего макета, а вы сюда я так понял пришли за идеей :)

Comments

[tripcollor]

JaredWinter : Да я тоже об этом думал, но тут подвох с высотой этих блоков внутри которых будет репитится линия, как сделать чтобы они растягивались как надо, ни как не могу ума приложить можно ли сделать это не прибегая к js чисто на css. Или еще и там придется шаманить?

[Конан Варвар]

tripcollor:
Растягивается как надо :)

[tripcollor]

JaredWinter: Хех)) это здесь на простом примере под 100% высоты родителя)
а как быть допустим с этим участком prntscr.com/gael8q тут даже 50% не задашь потому что блок может растягиваться и на поболее а картинка должна быть сверху текста

[Александр Х]

tripcollor: 100%, а сверху часть бордера картинкой перекройте (с отрицательным маргином слева, с прозрачностью).

вообще, тоже в сетке больших проблем не вижу, кроме подгонки отриц. маргинов справа и вот таких частичных перекрытий.

[tripcollor]

Александр Х: Моя проблема была в том что у меня был много идей, но они были не универсальны.
Спасибо всем за советы

[Виолетта Морозова]

tripcollor: "пока делайте как можете, а потом решим" - у меня в последнее время работа со сложным дизайном проходит как-то так)))

Answer 2

[cssfish]

берем ту часть вертикальной линии, которая без закруглений. делим на два блока (чтоб один сверху хорошо подходил, другой - снизу). вырезаем повторяющуюся часть. а в центре стык видно не будет, т.к. картинка. все )