使用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) “旋转” transform: rotate(45deg)旋转”它

Answer 2

直接的答案是使用SVG的poly属性

那就是你不依靠CSS来旋转它。

在css更改外观后，不会操纵一旦绘制的svg元素。

在poly中绘制'菱形'形状是避免边界矩形的最佳选择。

<svg height="250" width="500">
  <polygon points="0,25, 25,0, 50,25, 25,50 " style="fill:black" />
</svg>

基本的例子

的jsfiddle

更新：

您生成的代码显示它不是您正在编辑的SVG背景。

如果您想要更改SVG背景，可以添加我已排队的属性，而不是在CSS中编辑。

例如，对于我选择处理悬停事件，你需要在每个svg元素上使用id，然后:hover在每个元素上，或者javascript ..但它只是一个选项。 其他答案看起来更适用。

我的回答只是简化了SVG的绘制。

Answer 3

您是否尝试使用css rotate来限制矩形。 你现在可以使用SVG作为背景。

 .m-item { color: white; text-decoration: none; text-transform: uppercase; border: 2px solid #000; background-color: black; padding: 50px; position: absolute; transform: rotate(45deg) translate(25px); } .m-item span { position: absolute; transform: rotate(-45deg) translate(0, -14px); } .m-item:hover { background-color: #AA5; } 

 <a href="#" class="m-item"><span>m1</span></a> 

Answer 4

您需要自己旋转链接。 现在，你没有旋转任何东西，你只是用旋转的盒子显示图像。 相反，使背景图像不旋转并使用CSS旋转它们。

例如：

-ms-transform: rotate(7deg); /* IE 9 */
-webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
transform: rotate(7deg);