Is it possible to make a squiggly line?

Question

If I wanted to make a horizontal line, I would do this:

Answer 1

EDIT: Given the requirement of no images/data uri.

You can also cram a bunch of border-radius elements together, alternating with top/bottom or left/right edges disabled. I've generalized this into a function that appends them to an element.

Javascript, where squigglecount is the number of "squiggles". You could generalize that to an actual width if you so desired.

http://jsfiddle.net/V7QEJ/1/

function makeLine(id, squiggleCount)
{
    var curve;
    var lineEl = $(id);

    for (var i = 0; i < squiggleCount ; i++)
    {
        curve = document.createElement('div');
        curve.className = 'curve-1';
        lineEl.append(curve);

        curve = document.createElement('div');
        curve.className = 'curve-2';
        lineEl.append(curve);
    }
}

CSS:

.curve-1,
.curve-2{
    display: inline-block;

    border: solid 1px #f00;
    border-radius: 50px;

    height: 20px;
    width: 20px;
}

.curve-1{
    border-bottom: none;
    border-left: none;
    border-right: none;
}
.curve-2{
    border-top: none;
    border-left: none;
    border-right: none;
}

Old (with images):

There's already a bunch of answers, but here's an easy way to do a vertical squiggly line, similar to Lawson's answer.

Basically, you use background-image and a data-uri of a squiggly line to do it. I probably wouldn't use this for anything but it's an interesting thought exercise. There are a bunch of data uri generators that you can use online to change your own images.

http://jsfiddle.net/zadP7/

Stuff

More Stuff

.aux{
    display: inline-block;
    vertical-align: top;
}
.line{
    display: inline-block;

    height: 400px;
    width: 10px;

    background-image: url(...etc...) 
}