Webmasters Stack Exchange is a question and answer site for pro webmasters. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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.

share|improve this question
up vote 4 down vote accepted

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

share|improve this answer

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

share|improve this answer

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.

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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