@WebforSelf

Как реализовать ломаные линии css адаптивно?

Есть такое изображение

5f7af273dcb0e592740577.png

На нем условно метка, место на карте ( разместил с помощью position absolute) и хотел добавить ломанную линию.

Но суть в том, что при адаптиве естественно все сползает, вопрос такой.

Может сделать все литым изображением? но хотел на метку сделать ховер эффект , поэтому наверное отпадает.

Ну либо создавать много calc и пытаться подгонять при изменении экрана, кто что посоветует?
  • Вопрос задан
  • 778 просмотров
Пригласить эксперта
Ответы на вопрос 3
JamesHatfield
@JamesHatfield
Front-end developer
Можно попробовать линию с точкой сделать отдельной PNG и позиционировать ее абсолютно карты. Ну либо попробовать реализовать через канвас. Извини бро, но пока все мысли на этот счет!
Ответ написан
alsolovyev
@alsolovyev
Возможно, Вам подойдет map элемент. Задайте относительные позиции для меток(area tag) на карте-картинке и анимируйте их при наведении.

А так конечно лучше через SVG и preserveAspectRatio рисовать: карта России
Ответ написан
profesor08
@profesor08 Куратор тега CSS
Делал что-то подобное, я использовал % от ширины, просто посчитал на калькуляторе, где какой элемент должен находиться в %.
Ответ написан
Ваш ответ на вопрос

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

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