A CodePen by Jerad Gallinger. Diagonal menu buttons - The trick to making the diagonal buttons is to use transform: skewx(n); on h1 and nav li, which creates the parallelograms. Then you apply transform: skewx(-n); to nav span. The spans are necessary because if you apply skewx(-n) to nav a, the links' clickable areas won't be skewed. You only want the text to be unskewed, not the links.

The whole thing gracefully degrades into a typical menu with rectangles if a browser doesn't support CSS transforms.

Like it? Follow me on Twitter: http://twitter.com/jeradg