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:
http://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:
http://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>