Is it possible to create a line between elements in CSS3?

Question

I am using jQuery Draggable in the application I am creating, and I wonder if it is possible to somehow create a line between the dialog box and the element on the website? I want him to drag him by dragging him.

I am looking for a CSS / HTML way, not jQuery / JS. If there is no way to create it using pure CSS3 / HTML5, then I will start with the JS approach - I just want to know :)

Answer 1

Basically: no, there is no way to achieve this with CSS alone.

But, if this is seen as a CSS riddle (I recommend you not use the following solution in any real application at all), you could achieve something similar. Again, this will completely abuse both HTML and CSS.

Basically you create a lot of divs , each meaning "pixel". You change the divs ' background-color to :hover and save the background-color state after :hover using the (another offensive) transition trick (pseudo-infinite delay).

Here is a demo: a small link . Try hanging on the tops to see the breadcrumbs that are drawn when you move the mouse.

I, again, exaggerate, this is completely offensive and should not be used in any particular application.

This can be expanded to create a small paint program using CSS. I made a small belt to illustrate: another small link (try drawing by clicking and moving the mouse!)

Bottom line: Use JavaScript - this is the only resort in this case (you cannot control the canvas without JavaScript).