Diamond menu items using CSS and SVG

Question

I want to code the below design in HTML&CSS

What I made so far is:

I made it using:

1. a links
2. SVG as background
3. Absolute position and translate(x,y) property in CSS.

Please check this fiddle for the live link

The issues in my design are:

1. Each item is actually a rectangle, if you notice the highlighted rectangle in red, this is the area of the selection, so if you hover over the left corner of m2, it will select m3.
2. I want to change the background color of the SVG background when hover, how to achieve that?
3. Is there an ideal way to make this concept better? even if we used JS to position the elements.

Click here to view the SVG shape itself.

CSS code for the items:

.menu #m1 {
  right: 100px;
  transform: translate(-140px, -160px);
}
.menu #m2 {
  right: 295px;
  transform: translate(-25px, -80px);
}
.menu #m3 {
  right: 400px;
}
.menu #m4 {
  right: -60px;
  transform: translate(-140px, -160px);
}
.menu #m5 {
  right: 140px;
  transform: translate(-20px, -80px);
}
.menu #m6 {
  right: 240px;
}
.menu #m7 {
  right: -95px;
  transform: translate(-15px, -160px);
}
.menu #m8 {
  right: 0px;
  transform: translate(0, -80px);
}

Thanks,

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%;
}

<div class="wrap">
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
</div>

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