Как сверстать такую секцию?

Question

[Лобстер]

Используя flexbox я смогу их так установить, но что делать с линиями? Или же сделать что-то на подобии адаптивной галереи, а как тогда адаптивить, что с линиями делать?

Как верстать такую секцию? Подскажите. Может быть примеры есть какие.

Answer 1

[Антон Мудренок]

вроде работает
код не идеален, но идею вы надеюсь поняли
codepen.io/just-a-training/pen/NAXWxm/?editors=1100

Comments

[Алексей]

Прикольно, возьму на заметку. А как с кроссбраузерностью?

[Антон Мудренок]

Алексей: а какие могут быть проблемы? я открыл в firefox и ie11, все работает

Answer 2

[Алексей]

Тут вроде все блоки одинаковой ширины.

• Тогда можно для больших разрешений задать ширину через проценты.
  
• Линии сделать исходя из ширины секции, повернуть трансформом и абсолютно позиционировать. Кругляши с числами естественно тогда должны быть уровнем выше (z-index)
  
• Для меньших разрешений дизайн несколько поменять, отказавшись от линий, так как такое оформление в две строки смотреться не будет (имхо), а в одну не войдет
  

Comments

[Лобстер]

Я так же думал. Просто таких шаблонов не нахожу чтобы посмотреть как там делают. т.е. копать нужно в этом направлении? => ruseller.com/lessons.php?rub=2&id=1338 создать 6 блоков одинаковой ширины и адаптивить как галерею. Так как я буду применять flat:left как избежать обтекания? Чтобы нижняя секция не налазина на эту?

[Алексей]

Старком Джо: При уменьшении количества элементов в ряду, можно предотвратить подъем нижних секций:

• Либо разделителями clearfix, которые установлены в display: none; и появляются только при нужном разрешении
  
• Либо можно сделать блоки через display: inline-block; , а не через float. Тогда они будут сами занимать положение по строкам
  

Answer 3

[Dim]

SVG вам в помощь
xiper.net/learn/svg

Comments

[Лобстер]

Ну если вы хорошо в этом разбираетесь то помогите. Я не ленюсь с делать. Дело в том что я не понимаю как тогда адаптивить такую секцию?

[Лобстер]

Нужно ли как-то разбивать по частям или оно должно быть цельное. Я не понимаю SVG

[fsockopen]

или Canvas

Answer 4

[Никита Кравченко]

Можно методами canvas