@Kilila

Как лучше сверстать макет такого вида с псевдоэлементами?

Добрый день, знатоки :) Подскажите, как лучше реализовать синие линии в данном макете?
5a9ac8892d1bc566608081.jpeg
(Красными линиями я схематично набросал главные блоки, чтобы было понятно) Так вот, три линии, которые проходят как бы сквозь иконки я сделал через ::before у каждого из трех контейнеров. Затем две боковые вертикальные линии я сделал через ::before и ::after у первого элемента самого верхнего из трех контейнеров и последнего элемента третьего контейнера. При определенной ширине экрана вертикальные линии ломаются, примерно, вот так:
5a9aca1c0dc2f441354030.png
Есть ли какой-то другой способ сверстать адаптивнее и универсальнее, либо не заморачиваться и просто поработать брэйкпоинтами? Просто разрыв-то происходит из-за расширения контента в высоту, из-за сужения, но сделать тут универсальное решение не понимаю как. Т.к. в начальном виде, у вертикальных линий есть ограничение по высоте, чтобы не пересекали горизонтальные линии, тут же при сужении будет происходить постоянное увеличение высоты...
  • Вопрос задан
  • 77 просмотров
Пригласить эксперта
Ответы на вопрос 1
@abfrontend
Попробуй задать им высоту 100% через top: 0; bottom: 0; и сдвинуть на нужный отступ через translateY к примеру
Ответ написан
Ваш ответ на вопрос

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

Войти через TM ID
Похожие вопросы
Sveak Барнаул
от 40 000 руб.
Blogman Оренбург
от 20 000 до 60 000 руб.
от 10 000 до 15 000 руб.
19 авг. 2018, в 17:22
1000 руб./в час
19 авг. 2018, в 17:11
200000 руб./за проект
19 авг. 2018, в 12:12
40000 руб./в месяц