Curved lines using only HTML and/or CSS

Question

I need to add curved lines connecting nodes of a diagram in HTML. I want to create them using only HTML and/or CSS. I\'m ok with CSS3 even if not

Answer 1

I think for hundreds, even up to thousands of objects, then SVG performance is not going to be too bad, certainly no worse than any other way you might approach it. The main performance issue would be in IE where you'd have to use some method to fall back to VML or Flash and you say you're not too concerned about IE8 support.

You could draw all the lines in a single path and only have one object to deal with, as long as you're not going to be adding and removing lines all the time. All the lines in a path would have to be the same colour, so you'll need as many paths as you have colours of lines.

Answer 2

You should probably be using canvas, since canvas is designed for drawing stuff. The performance of using canvas should be better than using DOM elements, especially with newer versions that uses GPU acceleration for drawing.

Anyway, you can always use border-radius combined with border-width or border-color to create curves by showing only one side of the border of element, while hiding all others:

#curves.width div {
    border-color: transparent transparent transparent #999;
}

#curves.color div {
    border-width: 0 0 0 1px;
}

Combining this with different combinations of border-radius, and you've got yourself some curves. I've whipped up a very simple demo for this here: http://www.jsfiddle.net/yijiang/nDxYJ/

You can even combine it with CSS3 transform rotation and transformation for more flexibility. It is, however, still more restrictive than using canvas, and more difficult to control too.