Как сверстать такие выноски?

Question

[iBird Rose]

Собственно вопрос как соеденить такой кривой 2 точки? чтобы как бы не двигались и сами точки, и тект - кривые тоже подстраивались. может есть готовые скрипты для рисования такого в канвас?

Answer 1

[moneymakerXA]

Не знаю правильно ли это, но я делал подобную вещь в фотошопе, а потом просто вставлял картинку. Но не по отдельности 5 фрагментов, а один рисунок, суть та же, мороки меньше, с нюансами пока не сталкивался

Comments

[iBird Rose]

ну если не найдется ответа - так и сделаю) просто мало ли) может появился уже легкий способ для таких штук)

Answer 2

[olegshilov]

кривая лежит в абсолютно спозиционированном блоке с фиксированными размерами и прозрачным фоном и overflow: hidden;
внутри лежит так же абсолютно спозиционированный див, который собственно и есть кривая, с нужным border-radus и border: 1px solid black;

Comments

[iBird Rose]

это не даст универсальности. нужно чтобы как бы не двигали и сами точки и текст - кривая подстраивалась. чтобы я выдал бекендеру только координаты top и left - для точек и для текста - и он уже двигал их как вздумается и не заморачивался на счет кривых.

[olegshilov]

оберни все это в еще один див и положи туда к кривой, блоки с точкой и текстом. а дальше позиционируй уже этот блок.

[olegshilov]

или я непонял вопроса до конца

[olegshilov]

я до конца не понял вопрос!!)

Answer 3

[Алексей]

Можно попробовать при помощи SVG - blogs.sitepointstatic.com/examples/tech/svg-curves...