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

This is how I would do it to keep the boundaries of the shapes based on Responsive grid of diamonds (no JS or svg needed):

DEMO

.wrap{
    width:50%;
    margin-left:13%;
    transform-origin:60% 0;
    transform: rotate(-45deg);
}
.wrap > a{
    float:left;
    width:19%;
    padding-bottom:19%;
    margin:0.5%;
    background:teal;
}
.wrap > a:hover{
    background:gold;
}
.wrap > a:nth-child(4){
    clear:left;
    margin-left:20.5%;
}
.wrap > a:nth-child(7){
    clear:left;
    margin-left:60.5%;
}

To insert content in the shapes, you can "unrotate" it with transform: rotate(45deg)