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 all browsers support the feature I need (particularly don't care so much about IE8 and below). Here are solutions I could use with reasons against them:

• canvas or svg - don't like it because I have to then deal with browser differences and not sure of performance when I have hundreds, maybe thousands, of these objects floating between my nice nodes
• image - I would need a ridiculous number of images to deal with all the possible curved lines and an image doesn't scale nicely at all when zooming in and out
• div with a css border-radius and another div that covers the portion of the lines we don't want - not worried about IE8 and below not supporting this, but this is an ugly hack where I can't have the resulting curved lines over anything like a background or other lines overlapping. Can I?

What options am I missing? Is it possible to have a div with a border-radius that is visible for only 1 corner (and work on all browsers except IE8 and below)?

Answer 1

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.

Answer 2

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.