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

Question

[WebforSelf]

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



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

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

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

Ну либо создавать много calc и пытаться подгонять при изменении экрана, кто что посоветует?

Comments

[Stranger in the Q]

я уже писал, подойдет svg изображение

Answer 1

[Сергей Зенькович]

Можно попробовать линию с точкой сделать отдельной PNG и позиционировать ее абсолютно карты. Ну либо попробовать реализовать через канвас. Извини бро, но пока все мысли на этот счет!

Answer 2

[profesor08]

Делал что-то подобное, я использовал % от ширины, просто посчитал на калькуляторе, где какой элемент должен находиться в %.