: 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

@Murray976

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.

Vote Up Vote Down

@Barnes313

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: www.javascriptkit.com/howto/imagemap.shtml
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: www.image-maps.com/
Example on how you can define hot-spots in an image map in Dreamweaver:



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 .../>
</map>

Vote Up Vote Down