Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

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
add comment

3 Answers 3

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
add comment

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
add comment

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
add comment

Your Answer

 
discard

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.