CSS gradients and slanted chequerboard patterns

Today, I started to build the fourth site from a particular designer I've been working with a lot this year. I'm beginning to get a feel for his style and what kind of assumptions he makes about how things resize responsively. So when I saw this image:

... I figured that the yellow checked background would probably need to extend the full width of the page ("bleed", in ye olde printing terms). It also reminded me a little of one of those CSS gradient backgrounds. I have history with background gradients, having built an ugly wallpaper generater in a previous life.

However, I couldn't remember how they work, so I brushed up on the theory a bit, before wondering if there wasn't a shortcut I could take.

Great artists steal

Turns out there was. I'm indebted to Oriol Torrent Florensa whose chess pattern gist was exactly the kicking off point I needed.

Anyway, here's a Codepen of the whole process, if you love spoilers:

Version one of the code

Here's the version of the CSS based on the original chequerboard pattern:

.angry-wasp {
  background: 
    linear-gradient(155deg, transparent 75%, yellow 0%) 0 0,
    linear-gradient(-25deg, transparent 75%, yellow 0%) 43px 43px,
    linear-gradient(155deg, transparent 75%, yellow 0%) 43px 43px,
    linear-gradient(-25deg, transparent 75%, yellow 0%) 0 0,
    #000;
  background-size: 86px 43px;
}

That seems pretty complicated, yeah? Dunno why transparent gets added in there, then black is defined at the end. Hmm.

Developer's remorse

In an older version of this post, this was the point where I finished this post, with the frankly undefendable position that while I didn't completely understand how the gradient worked, I'm not paid by the hour and had to move on to other tasks.

The next morning, I spun up a new Codepen, determined to explain this to myself. Here's what I've come up with:

Step 1

I started with the simplest possible gradient, a vertical transition from red to blue:

.step1 {  
  background: linear-gradient(
    90deg,
    red,
    blue
  );
  background-size: $wasp-width $wasp-height;
}

If you don't define any stops, CSS will just start with one colour and fade it into the following colours (as many as you want to add).

Step 2

Next, I added in some stops, so that the red starts at zero (the left most pixel), extends to the half way point, immediately switches to blue, which then stretches the rest of the way. So it's not a smooth gradient at all, rather it's two blocks of colour sitting next to each other, each taking up exactly half the width of the box.

.step2 {  
  background: linear-gradient(
    90deg,
    red 0% 50%,
    blue 50% 100%
  );
  background-size: $wasp-width $wasp-height;
}

Step 3

Next, I added a third colour to the mix, as if it wasn't ugly enough already. I adjusted the percentages so that each block takes up exactly one third of the background.

.step3 {
  background: linear-gradient(
    90deg,
    red 0% 33.33%,
    blue 33.33% 66.66%,
    green 66.66% 100%
  );
  background-size: $wasp-width $wasp-height;
}

Step 4

Now the whole background needs to be rotated, so that the bottom left corner of the blue line is in the bottom left corner of the box, but the top right corner is in the top right hand corner of the background.

Even if the background was a perfect square, this angle wouldn't be 45 degrees because of the thickness of the blue stripe.

What I originally wanted to do here was to look into the SCSS math object and see if I could calculate the angle automatically, given the width and height of the background. While SCSS has extensive documentation on the trigonometry functions, I couldn't get any of them to work in Codepen (perhaps it uses an older version of SCSS).

I even tried to get various homebrew functions to work, with no success. In the end, I just eyeballed it:

.step4 {
  background: linear-gradient(
    -25deg,
    red 0% 33.33%,
    blue 33.33% 66.66%,
    green 66.66% 100%
  );
  background-size: $wasp-width $wasp-height;
}

From there, it was just a case of swapping out the colours for the ones in the design.

Background gradients can be baffling and verbose. I'm glad I went through this process if only because the final code is so much smaller than what I originally ended up with.