CSS: text over an angled gray background

This was an interesting little problem to solve: How do we make a column of text display on top of an angled background color? Better yet, how do we cut a corner out of the text to make it fit better?

The answer to the first problem was comparatively straightfoward: two nested blocks, one rotated 45 degrees down and the other rotated 45 degrees right back. The second problem was trickier, but can be solved if you’re using a browser that supports CSS Shapes.

3D CSS crop rows

In the spirit of New Earth USA, here’s some minimalist crop rows in 3D CSS.

Let’s look at how this is built. Continue reading 3D CSS crop rows