Как можно сверстать вот такие кнопки со стрелками?

Question

[Dark19]

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

Comments

[Emin Amirov]

Скриншот не доступен.

[Dark19]

добавил, спасибо

Answer 1

[Hyubert]

Вот держи костиль

UPD: если нужно имено адаптив, попробуй так

подели на row (красный блок на рисунку) каждую строку, и к последнему елементу добавляй вертикальную линию, а появления дополнительного блока в row регулируй media

Что бы компенстровать промежутки между медиа, используй решение Sergey Goryachev, с флексбоксами

Answer 2

[Сергей Горячев]

У Hyubert хорошее решение. Правильное.

Но если прям важно резиновое, придется еще костылить)

Тут выбирать придется, либо резиновая, либо красивая.
https://jsfiddle.net/webirus/97u6rz0u/

Набросок второго варианта, немного проще.
https://jsfiddle.net/webirus/8x09ykgf/
Проще в плане структуры кода, но сложней в плане реализации.
Зато опять же, соблюдается полная резиновость.

Я бы только separator'ы добавлял уже через JS.
И строкам можно менять направление без класса .rtl и .ltr, а через :nth сделать.
Чтобы в коде сайта не совсем стремно смотрелось.

Answer 3

[Dark19]

Вот как я сделал с помощью флексбоксов: https://jsfiddle.net/dark19/jc2j0as6/

Answer 4

[Сергей ZSA]

Под стрелочками я понимаю линии от одного к другому. А почему их не сделать через after у каждого кружка и не позиционировать абсолютно? Ну и естественно делать через width: 1px; и нужную высоту и потом их просто через rotate в нужных местах вертать (все они между собой одинаковые, вполне можно так сделать). Даже если это должно как-то перестраиваться - не проблема это сделать через медиа-выражения.

Comments

[Emin Amirov]

Абсолютно солидарен.

[Dark19]

я сделал через before, но выходит вот так joxi.ru/GrqLp6afQya0LA, и я не могу перекрыть линию другой кнопкой, так как там бэкграунд прозрачный

[Dark19]

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

Answer 5

[Flur]

Не проше svg-шки использовать чем парится с селекторами, тем более у вас верстка резиновая

Comments

[Hyubert]

можете подкинуть материал или пример как это сделать на svg?

[Flur]

Годных материалов, как рисовать svg, на хабре до хер/а. Можно просто сверстать эту панельку в illustrator'e, тут ничего сложного