css wavy line

This snippet shows a technique to use CSS gradients and HTML characters with a small trick to create a usable pattern. Using the same principle various designs can be created.

Here we’re creating some wavy lines using CSS after and before.

In this example, we'll create a pattern using gradients. We'll repeat the pattern and clip it using overflow to make it seamless.

HTML will only contain a div.

<div class="line"></div>

1. Create a container.

.line {
position: relative;
height:30px;
display:block;
}

2. Add Before Element.

.line::before {
content:'';
background-image: linear-gradient(-45deg, transparent, transparent 49%, red 49%, transparent 51%);
position: absolute;
background-size: 50px 50px;
width: 100%;
height: 26px;
}

3. Add After Element

.line::after {
content:'';
background-image: linear-gradient(45deg, transparent, transparent 49%, red 49%, transparent 51%);
position: absolute;
background-size: 50px 50px;
width: 100%;
height: 26px;
}

Edit Example

Another technique is using letterspacing and HTML characters.

The technique is itself self-explanatory. We'll use some characters in a repeating pattern and offset them to create a pattern.

<div class="letterspacing">∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿</div>

CSS code is simpler:

.letterspacing{
font-family:verdana;
letter-spacing:-4px;
font-size:24px;
}

The output will look like this

Edit Example

Putting all together with alternative examples:

Edit Example