1 Thing A Week 1 Thing
A Week

CSS only zigzag patterns explained Using CSS to create more complex backgrounds without the need for images

Week 142.0 — 13th July '20

This is the first in a series of articles where I'll look at creating CSS patterns work and explain how it's achieved. First up is the zig-zag pattern, this is what we'll be creating:

Using CSS' linear-gradient function to create triangles you can build up the pattern bit by bit. Let's break the pattern down so we can see the triangles we need to create:

Each part of the pattern is split into 4 squares and there are two triangles in each. Each of these squares is mirrored and repeated to create the zigzag. So we need to create 4 patterns that are repeated. Let's create the first one:

background: linear-gradient(-135deg, teal 25%, transparent 25%) -50px 0;

This creates a diagonal pattern that is teal 25% of the way down, then transparent for the remainder. It's also been rotated and set to be offset vertically by -50px. Next, we'll create a mirror of this pattern that gives us the top two squares of the pattern.

background: linear-gradient(135deg, teal 25%, transparent 25%) -50px 0,
linear-gradient(-135deg, teal 25%, transparent 25%) -50px 0;

You can set multiple linear gradients, just comma separate the definitions. This is exactly the same as the previous triangle, just rotated in the opposite direction. So now we're defining two linear gradients that go in two different directions and when they repeat we end up with row after row of larger downward facing triangles.

background: linear-gradient(135deg, teal 25%, transparent 25%) -50px 0,
linear-gradient(-135deg, teal 25%, transparent 25%) -50px 0,
linear-gradient(45deg, teal 25%, transparent 25%);

In the rows between the downward facing arrow we now have our third triangle. This doesn't require any positioning, just rotating. So now we need to be mirror this triangle too to give us the complete pattern and we can do that by redefining the gradient from the last step, but rotating it in the opposite direction:

.zigzag {
background: linear-gradient(135deg, teal 25%, transparent 25%) -50px 0,
linear-gradient(-135deg, teal 25%, transparent 25%) -50px 0,
linear-gradient(45deg, teal 25%, transparent 25%),
linear-gradient(-45deg, teal 25%, transparent 25%);
background-size: 100px 100px;
}

This is the code you'll need to recreate the pattern. To make the pattern larger, change the -positioning of the first two linear-gradients to half of whatever you choose as the background-size and you now have a repeatable pattern created with just CSS!

And go wild with the colours, try to fit more colours in and see what you can create.

More from 1 Thing A Week
« Fake Doctors, Real Friends Stranger Things 3 The one thing missing from the Apple TV 4K experience »

Advertisement

Notable

Quick links and commentary on interesting articles, videos and more throughout the week.

  1. 142.1 – Monday
    1. Google to 'dramatically' improve Chrome impact on Mac battery life macrumors.com
    2. Evolution of the Alphabet thisiscolossal.com
  2. 142.2 – Tuesday
    1. LEGO Nintendo Entertainment System™   £209.99 lego.com
  3. 142.4 – Thursday
    1. "Ted Lasso" trailer Apple TV on youtube.com
  4. 142.5 – Friday
    1. Supercapacitor buses are a thing now informationisbeautiful.net
  5. 142.6 – Saturday
    1. A Class Divided FRONTLINE PBS on youtube.com
    2. A guide to all the Super Powers u/Chained_Escapist on reddit.com

Jump to notable items for Week #141, Week #143 , view the notable archive or my favourites.

About 1 Thing A Week

A website curated by @cchana bringing you 1 Thing A Week, delivered every Monday morning.

You can find a list of all articles in the archive, or read the most popular.

Find out more about 1 Thing A Week or read the privacy policy.

Market

Visit the market and support 1 Thing A Week.

You can find 1 Thing A Week on Twitter, Facebook, Instagram & Reddit

Basic Analytics