Diamond menu items using CSS and SVG

Question

I want to code the below design in HTML&CSS

What I made so far is:

Answer 1

You need to rotate the links themselves. Right now, you're not rotating anything, you're just showing images with rotated boxes. Instead, make the background image unrotated and rotate them with CSS.

For example:

-ms-transform: rotate(7deg); /* IE 9 */
-webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
transform: rotate(7deg);