Patterned triangles with CSS

Published on 3/19/2013

As you might know, I recently run the BEM LOVE project to demonstrate how blocks can communicate with JavaScript.

The first example is dull enough; a boy, a girl and the heartless world.

Today, I was going to start with another one with a boy plunging into difficulties of choice. He has two girls to ask. Suddenly there is a challenge for you.

Let's think if it's possible to attract a boy with a booooooring one-colour dress? Seems like no.
So, the girls in the page are in need of nice patterned dresses. Any ideas on how to code a patterned triangle in CSS?

Where to code?

To dress the girls excellenty and toppingly you need just three steps: