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.

Published July 13, 2004 · Updated September 17, 2005
Categorized as HTML and CSS
Short URL: https://snook.ca/s/175

Conversation

1 Comment · RSS feed
Tom Werner said on July 13, 2004

Good work Jonathan. I think we all forget about ems sometimes, and they are clearly the optimal solution for this scenario.

Sorry, comments are closed for this post. If you have any further questions or comments, feel free to send them to me directly.