Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for professional graphic designers and non-designers trying to do their own graphic design. It's 100% free, no registration required.

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

enter image description here

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

Any help and advice is much appreciated. Thanks in advance.

share|improve this question
add comment

2 Answers

up vote 2 down vote accepted

CSS and positioning

You can save them as parallelograms with transparent edges (png) (meaning of course he image will be square). In your CSS you can then set your div container to:

.button {
    position: relative;
    left: -5px;
    //... other specs

The -5px is just an example. In html you could have used more complex shapes directly, but html5 is in draft mode and is yet not fully supported.

Edit: solution two -

Image maps

In the "old" days we would have saved out the whole image as-is and apply an image map to it. An image map specifies a polygon that will be the hotspot on an image. For each polygon you define you can specify click events and so forth as ordinary.

Defining image maps manually is a bit tedious though, but if you have access to f.ex. Dreamweaver you can simply just draw the polygon on top of your image and Dreamweaver will do the rest for you.

Here is a tutorial on how to make image maps:

I found an online service where you can define maps too, I'm not sure how good it is, but give it a try in case you don't have Dreamweaver or a similar tool:

Example on how you can define hot-spots in an image map in Dreamweaver:

Image map hotspot demo

In code you would then end up with:

<img src="header.png" alt="Image map demo" width="1595" height="172" border="0" usemap="#Map" />

<!-- #Map refers to the ID of the map definition -->

<map name="Map" id="Map">
  <area shape="poly" coords="579,56,564,128,646,128,663,57" href="team.html" alt="Team" />
  <area shape="poly" ..other shape for next button and so on .../>
share|improve this answer
add comment

Adding to Abdias answer, you don't necessarily have to cut each button either. For the main red bar, for example (and this applies to the other elements) you could have three images/sprites: Left, medium and right. Left and right would be the diagonals, medium would be a repeated background 1px width with the gradient in it. I'd probably use three divs per "button", one with each background.

You can do the same for the others, and use position:absolute and z-index to put one on top of the other. Or, if you don't want to support ie8- you could do everything with css3.

share|improve this answer
Just to add a few reasons for not using repeating background images... Each one is another individual asset to be loaded when the page loads, and they can't be placed in sprites for obvious reasons. Background images don't load until everything else on the page has loaded, so using them in important places such as navigation could mean that the user is unable to see navigation for 10+ seconds while loading (especially if text and background are both white). The disadvantages usually outweigh the advs, I'd use CSS to do it, with an acceptable fall back like squares instead of parallelograms. –  Dominic Jul 12 '13 at 13:26
add comment

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.