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…

Accepted Answer

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.

Curved lines using only HTML and/or CSS

Solution

Problem