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

A direct answer would be to use the poly attribute of SVG

That was you are not relying on CSS to rotate it.

The svg element once drawn is not manipulated after the css changes the appearance.

Drawing a 'diamond' shape in poly is your best option to avoid the bounding rectangle..

Basic example

JsFiddle

Update :

The code you have produced is shows it is not the SVG background you are editing..

If you want the SVG background to change you can add the attribute as i have lined up, not edited in CSS.

For my option to work on a hover event for example, you will need an id on each of the svg elements and then :hover on each of those, or javascript.. but its just an option. Other answers look to be more applicable.

My answer only facilitates the drawing onto the SVG.