I have to slice website design to HTML/CSS. Main navigation menu looks like below:

I am beginner webdeveloper and I don't know how to slice this design into compatible and cross-browser code. How these parallelogram shaped items should be sliced?

There are also hover and selected states so I would probably use CSS sprites for that, but main problem for me are these parallelograms.

3 Answers 3


If you don't want to play around with css transform.

Honestly the best thing is to use rectangles and ensuring the rollover states do not cross over the rectangles. Example: http://imm.io/J4D8

I also found this if it helps, http://doctype.com/rollover-done-css

enter image description here


Although not supported by older browsers, you could have a look at the transform property in CSS. http://davidwalsh.name/css-transform-rotate It would be quite fiddly though, I'd suggest you to use background images and position the text above it (and possibly even the text as image) in order to achieve the effect shown in the url you have posted


You can create parallelograms with CSS properties, although it looks like it shows up as a square in IE.

You also may be able to use a good old fashioned imagemap with some area tags utilizing shape="poly" and coordinates for the points. Not sure if that works with rollover or not.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.