Friday CSS Challenge
This week I had to realise a designer's vision of having slanted menu items in a standard navigation bar. A bit like this:
The menu items can be of any width and they need to show the diamond when hovering over the unselected ones.
At first I though it was easy enough. Then I thought some more and decided it was "impossible". Then I thought even more and came up with a hack that worked.
How would you do it though? If you fancy the challenge you've got until Monday when I'll show how I did it with some basic CSS and a smidge of lateral thinking.
Skip to the 
You can subscribe to an individual
Cool. Probably hard without css3 but here's one approach that's kinda clever.
http://net.tutsplus.com/tutorials/html-css-techniques/how-to-create-diagonal-lines-with-css/
The other way I thought of was with pseudo elements. Not sure if you played with those yet. I watched a nettuts or css podcast on itunes I believe talking about pseudo elements where you can insert content into your DOM object before or after the element.
Reply
This guy always cranks out cool pure html/css solutions:
http://www.cssplay.co.uk/menus/slanty.html
Reply
Looks like a re-thinking of the trick used in the link in Jim's comment above.
It's nice that it doesn't use an image, but, looking at the HTML it all looks a bit messy with all those empty B tags. Clever, but as a HTML purist I'd shy away from that approach.
Reply
I suppose you use a list, so each list element would become like this:
<li><span class="left"><span class="right">Blogs</span></span></li>
Set display:block to each span element, left has the left background (only the corner) and a padding-left of the same width of the background image. Idem for the right corner.
Reply
In essence yes. The only trouble with that approach is that the menu items are then spread apart by twice the width of the image. This looks odd. See my post today for how I used negative margins to address this.
Reply
HTML list, background images and ofcourse CSS..
Reply