Improved Bulletproof Slants

Dan Cederholm has a great article on implementing a scalable slanted divider between navigation. My issue with it is that the text, especially as you increase or decrease the font size, isn't exactly centered between the slants. To achieve centering, we simply switch from pixels to em's.

Original:

#nav a { padding: 6px 30px 6px 5px; ... }

With em's:

#nav a { padding: 0.5em 2.5em 0.5em 1em;  ... }

The ratio between all four sides remains consistent as the font size gets bigger or smaller. The difference between the right padding (2.5em) and the left padding (1em) reflects the approximate size of the slant. In this case, 1.5em. Now, no matter what size, the text is centered between the slants.

Check out the example.