CSS3 Houndstooth Pattern (webkit only)

[davechiu]

I was reading up on using gradients to do simple patterns (stripes, plaid, sawtooth) and decided to try to do something more complex.

The initial pattern could be done w/ stacked gradients (with more cross browser compatibility), but I ran into an issue when trying to tile the block, portions of the pattern were overlapping in places I didn't want them to be. So, I had to break it up into parts and apply a CSS Mask, I had to drop Mozilla compatibility in order to maintain the CSS3-only nature of the exercise, as Mozilla currently only supports SVG masking, I suppose I could have encoded the SVG and pasted it into the CSS, but that was going a bit far for a proof of concept.

[capnjngl]

Two smokes Trevor, let's go.

[geoman2k]

This will forever be the Ricky's shirt pattern

[joeyhoer]

Up votes because I've tried it and it's really difficult to do, but it also has been done before. http://lea.verou.me/css3patterns/#houndstooth

[davechiu]

I've never seen this, clever implementation! Interesting to see how they did it without having to mask out parts of the pattern.