Is it possible to make a squiggly line?

Question

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

Answer 1

I found a slighty nicer way to achieve trangle squiggly lines in CSS without halving heights or applying tricks that don't work well across browsers.

I tried @yeerk's solution but it only works well in Chrome. The lines had artifacts on Safari and Firefox.

Firefox

Safari

This solution is a variation of @liliputen's solution, however it improves on ease of flexibility.

You can change the line's size easily from the background-size property.

.squiggly {
    position: relative;
    height: 10px;
    width: 100%;
}

.squiggly::after,
.squiggly::before {
    height: inherit;
    width: inherit;
    background-size: 12px 100%; /* Change this to adjust the size of the squiggly line. */
    content: "";
    position: absolute;
}

.squiggly::before {
    top: -2px;
    background-image: linear-gradient(45deg, red 35%, transparent 0),
        linear-gradient(-45deg, red 35%, transparent 0);
}

.squiggly::after {
    top: 0px;
    background-image: linear-gradient(45deg, white 35%, transparent 0),
        linear-gradient(-45deg, white 35%, transparent 0);
}

You can also find it here on JS Fiddle.