使用 CSS 和 SVG 的钻石菜单项

我想用 HTML&CSS 编写以下设计代码

到目前为止我所做的是：

我用以下方法做到了：

1. a links
2. SVG 作为背景
3. CSS中的绝对位置和translate(x,y)属性。

请检查这个fiddle http://jsfiddle.net/shadeed9/pg94fpyc/5/对于实时链接

我的设计中存在的问题是：

1. 如果您注意到突出显示的内容，每个项目实际上都是一个矩形 红色矩形，这是选择的区域，所以如果您将鼠标悬停 在 m2 的左上角，它将选择 m3。
2. 我想改变 悬停时SVG背景的背景颜色，如何 达到那个目的？
3. 有没有一种理想的方法可以使这个概念变得更好？ 即使我们使用JS来定位元素。

Click here https://dl.dropboxusercontent.com/u/35853519/rect.svg查看 SVG 形状本身。

项目的 CSS 代码：

.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,

这就是我要保持形状边界的方法响应式钻石网格 https://stackoverflow.com/questions/23183773/responsive-diamond-grid-layout（不需要 JS 或 svg）：

DEMO http://jsfiddle.net/webtiki/1g4dx8Lm/

.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>

要在形状中插入内容，您可以使用“取消旋转”它transform: rotate(45deg)