Задать вопрос
@dennis_d
One Love, One Front-End

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

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

5d1a74be722fc178020969.png
  • Вопрос задан
  • 1005 просмотров
Подписаться 3 Средний Комментировать
Помогут разобраться в теме Все курсы
  • Нетология
    Веб-разработчик с нуля: профессия с выбором специализации
    14 месяцев
    Далее
  • Яндекс Практикум
    Профессиональная вёрстка на HTML и CSS
    3 месяца
    Далее
  • Яндекс Практикум
    Фронтенд-разработчик расширенный
    13 месяцев
    Далее
Решения вопроса 1
LenovoId
@LenovoId
svg, css,js
Примерно так ...если интересно спрашивай - научу ..у меня есть время

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

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

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

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

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

Похожие вопросы