使用CSS和SVG的钻石菜单项

Question

我想在HTML和CSS中编写以下设计

到目前为止我所做的是:

我用它做了:

1. 一个链接
2. SVG作为背景
3. CSS中的绝对位置和translate(x,y)属性.

请检查这个小提琴的实时链接

我的设计中的问题是:

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

单击此处查看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);
}

谢谢,

Answer 1

这就是我如何根据响应式钻石网格(不需要JS或svg)来保持形状的边界:

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>

要在形状中插入内容,您可以"取消旋转"它 transform: rotate(45deg)