: How can I slice parallelogram shapes to HTML/CSS? 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

@Shelley277

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.

Vote Up Vote Down

@Connie744

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: imm.io/J4D8
I also found this if it helps, doctype.com/rollover-done-css

Vote Up Vote Down

@Sue5673885

Although not supported by older browsers, you could have a look at the transform property in CSS. 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

Vote Up Vote Down