Как такое сверстать?

Здравствуйте!

Есть вот roadmap - как есго сверстать..да еще и адаптивно(

Может у кого есть что-то похожее на примете?
605de00dcd734391907406.jpeg
  • Вопрос задан
  • 2563 просмотра
Решения вопроса 2
RAX7
@RAX7
Держи, немного поправил один из своих старых набросков.

Принцип работы примерно, как описал Максим Морев в своем ответе.
Ответ написан
SeaInside
@SeaInside
10 лет пилю все эти штуки
Вот здесь, например, делал когда-то такую вещь (блок "Этапы создания корпоративного сайта").

605df09f637c9864487824.jpeg

Идея, вкратце:
  1. Элементы размещаете просто в сетку с помощью inline-block/float/flex/grid - как привычнее.
  2. Родителю задаёте относительное позиционирование, в него помещаете абсолютный элемент на всю ширину/высоту с небольшим запасом, на котором будете рисовать SVG.
  3. Как нарисуется - на js считаете ключевые точки (координаты), через которые нужно провести линии.
  4. Динамически рисуете SVG по вашим ключевым точкам.
    О том, какие варианты вообще есть, можно почитать на MDN, например.
    Выглядеть это будет примерно так:

    605df0b0256ca826129561.jpeg

    В вашем случае рекомендую использовать кривые Безье. Здесь мне нужно было сделать полукруг, поэтому я использовал дуги, у вас же просто статичная величина закругления.
  5. На ресайз окна считаете ключевые точки заново и перерисовываете SVG.
  6. Опционально заморачиваетесь и добавляете сверху ещё один путь, который по скроллу будет "заполняться"


Это в целом чёрная магия, можно полдня убить, но красиво :)
Если это всё очень сложно, то просто картинкой вставьте, высоту элементов фиксируйте, и меняйте картинку для адаптивных вариантов.

Готовых вариантов тут в общем-то вы вряд ли найдёте, нужно взять и разработать.
У меня была идея оформить это в какую-то библиотеку, но как и все остальные идеи - и ныне лежит в туду-листе на 60+ пунктов. :)
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
verkhoturov
@verkhoturov
HTML-Верстальщик / Frontend Developer
Если верстать с нуля, структура примерно такая:

<div class="road" style="display: flex; justify-content: space-between; position: relative;"> 

  ::before (картинка с полоской уходящей вверх)

  <div class="road__line" style="width: 100%; position: absolute;"> 
      прямая полоска  
  </div>
  <div class="road__point"> 
      ...
  </div>
  <div class="road__point"> 
      ...
  </div>
  <div class="road__point"> 
      ...
  </div>

  ::after (картинка с полоской уходящей вниз)
</div>
Ответ написан
Ваш ответ на вопрос

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

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