Как сверстать такой элемент, если блоков не 4 а больше?

Question

[arzamas-nick]

1. Как сверстать такой элемент, если блоков не 4 а больше ?
2. И как их адаптировать потом ?

Спойлер: Скрин

ps: имею ввиду линии как делать ?

Answer 1

[Ankhena]

Без всяких дополнительных блоков так: https://jsfiddle.net/k8q7sbxd/
С перестроением под мелкие экраны, например, так: https://jsfiddle.net/k763w48g/
(У меня просто полоски, фигурные нарисуете сами SVG'шками)

У всего блока псевдоэлементами: верхняя вертикальная черта с шляпкой и горизонтальная.
У каждого элемента псевдоэлементом вертикальная черта с кружком.

При адаптиве выстраивать все это в столбик. Черточки поворачиваются на 90°

Comments

[arzamas-nick]

там в картинке нет, но в макете заголовок и оттуда 4 стрелки отходят, в мобильном их делать как ? сбоку заголовок ? так дизайнеру не нравится

[Ankhena]

arzamas-nick, так пусть дизайнер и нарисует как ему нравится. Это его работа. Ваша работа верстать то, что он нарисует.

[arzamas-nick]

Ankhena, пробелема в том что это тест задание. =(

[Ankhena]

arzamas-nick, и вы всё еще хотите там работать? ))

[arzamas-nick]

Ankhena, уже нет. Но они единственные которые скинули эту ху___ю. Остальные просили полноценную страницу сверстать. А так сейчас вот самому интересно уже стало как же такое верстается.

[arzamas-nick]

Ankhena, еще на выходных такой элемент просили верстать но в другой канторе там только вот нужно было придумать самому как бы выглядели блоки если 4 блок встал вниз. Я опять не понял как делать тупо не нарисовал его. Как адаптировать такой декоративный элемент?

[Ankhena]

arzamas-nick, ну так там тоже самое: пока помещаются в строку пусть помещаются, на мелких в столбик. На средних можно змейкой.

Остальные просили полноценную страницу сверстать.

Всегда говорю, что полноценная страница требует полноценной оплаты. Причем с предоплатой 50%.
Альтернатива: я верстаю только часть этой страницы один или 2 блока, этого достаточно, чтобы оценить как я это делаю.
Если ни один из вариантов не подходит, значит это развод и желание получить работу на халяву.

[arzamas-nick]

Ankhena, Я тоже так посчитал и отказался. Пр этом это был полноценный лендинг + еще в формате png =)

[Ankhena]

arzamas-nick, полноценный лендинг в формате png вероятнее всего значит, что дизайнеру они не заплатили.

[arzamas-nick]

Ankhena, вот оно что спасибо я что то не додумался до этого.

Answer 2

[Талян]

Стиль с поворотными стрелками назначается для :first-child и :last-child, остальные внутри имеют одинаковый резиновый стиль с flex

Comments

[arzamas-nick]

А если блоков 6 тогда все испортится.

[Талян]

arzamas-nick,

Вот каркас. Теперь в верхней строке вам всего лишь нужно назначить фоны со стрелками

[zoozag]

arzamas-nick, Если я правильно понял, что имеет ввиду Анатолий ничего не испортится

1. Вертикальные линии задаете всем блокам.
2. Первому блоку добавляете горизонтальную линию от середины до правого края
3. Последнему блоку от середины до левого
4. Всем остальным от края до края.
5. Вертикальну линию по центру добавляете родителю.

Как вариант все горизонтальные линии можно заменить одной родительской.

[Талян]

arzamas-nick, изменил на CodePen, сделал с фоном чтобы вы поняли. Количество элементов не имеет значения. Стрелки рисовал сам, в пайнте - извиняйте.

[arzamas-nick]

Анатолий, понял. А вот как теперь все это адаптировать ?

[Талян]

arzamas-nick,
Ankhena ниже написал - как.

[arzamas-nick]

Анатолий, нет не получается. У меня при ширине 1024 уже все настолько хре...о выглядит что нужно вниз их отпустить, как в этом случае отпускать ?

[Ankhena]

Анатолий, там какие-то проблемы с головой у дизайнера, прочитайте комментарии под моим ответом.

arzamas-nick, я бы вообще убирала эти палочки на мобильных.

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

[arzamas-nick]

Ankhena, я версталщиком шел. Да вы правы я бы тоже просто их убрал но им не понравилось видать. Завтра посмотрю что скажут.