@dennis_d
стремлюсь к junior front-end developer

Верстка блока «как мы работаем» со стрелками между элементами, как оптимальнее?

Коллеги, всем привет!
Задался вопросом, как оптимально с точки зрения скорости загрузки и валидности кода сверстать такой же или подобный блок со стрелками "причудливой формы" ? Пример CSS кода необязательно писать, хотя было бы интересно. Но больше хочется понять концепцию для верстки подобных блоков
5d1a74be722fc178020969.png
  • Вопрос задан
  • 446 просмотров
Решения вопроса 1
LenovoId
@LenovoId
I want, women not to get sick
Примерно так ...если интересно спрашивай - научу ..у меня есть время

Ответ написан
Пригласить эксперта
Ответы на вопрос 2
Если просто, то нарезать картинок и решить в лоб, где каждая цифра и стрелка - отдельный блок с текстом. Можно фоном или просто картинкой с position absolute (внутри блока).

Если заморочиться, то цифры svg, стрелки тоже svg (плюс трансформ на искажение для изогнутости), так будет очень удобно адаптив делать: убрать transform и стрелки стали прямыми. С точки зрения производительности этот способ гораздо лучше первого.
Ответ написан
Вариант раз. Если есть время и навыки работы с вектором, то делай как советует Максим Ленский. Возможно получится экспортировать весь блок из макета в svg. Или же поднапрячь дизайнера.

Вариант два. Сверстать эти 5 блоков в html и css, а стрелки сделать с помощью LeaderLine

Вариант три. Вставить этот блок изображением (png) в разметку или фоном. В Яндексе верстальщики так и делают https://yandex.ru/promo/eda/partners/web#tekst-8
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы