Is it possible to create line between elements in CSS3?

Question

I'm using jQuery Draggable in the application I create and I'm wondering if it would be possible to somehow create a line between dialog box and element on website? I want it to follow draggable box as you drag it.

I'm looking for CSS/HTML way and not jQuery/JS way. If there is no way to create it using pure CSS3/HTML5 then I'll start with JS approach - just wanted to know :)

Answer 1

Basically: no, there isn't a way to achieve this using CSS only.

But, if this is observed as a CSS riddle (I recommend you don't use the following solution in any real-world application whatsoever), you might be able to achieve something similar. Again, this is going to be completely abusive of both HTML and CSS.

You basically create a lot of divs, each stands for a 'pixel'. You change the divs' background-color on :hover, and maintain the background-color after :hover state is gone using a (yet another abusive) transition trick (pseudo-infinite delay).

Here's a demo: little link. Try hovering on the top parts to see the 'breadcrumbs' that get drawn as you move your mouse.

I, again, exaggerate this is completely abusive and shouldn't be used in any actual application.

This can be expanded to create a tiny painting program using CSS. I've made a little dabblet to illustrate: another little link (try drawing by clicking and moving your mouse!)

The bottom line: Use JavaScript -- it's the only resort in this case (you can't control a canvas without JavaScript).