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

Question

[Dennis]

Коллеги, всем привет!
Задался вопросом, как оптимально с точки зрения скорости загрузки и валидности кода сверстать такой же или подобный блок со стрелками "причудливой формы" ? Пример CSS кода необязательно писать, хотя было бы интересно. Но больше хочется понять концепцию для верстки подобных блоков

Answer 1

[Максим]

Примерно так ...если интересно спрашивай - научу ..у меня есть время

Answer 2

[Алексей Николаев]

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

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

Answer 3

[Вадим Кот]

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

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

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