使用CSS和SVG创建菱形菜单项

Question

我希望用HTML&CSS编码以下设计：

目前的版本如下：

我使用了以下方法：

1. 链接（a标签）
2. SVG作为背景
3. CSS中的绝对定位和translate(x,y)属性。

请查看此fiddle以获取实时链接。

设计存在以下问题：

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

Thanks,

- shadeed9

---

你能否将它们分组成一个SVG？然后在g元素上添加属性，例如fill="true"（我在想用D3）。 - Pogrindis

将它们分组到一个svg中不会与响应式设计一起工作，对吧？你说的"g元素"是什么意思？还有d3呢？ - shadeed9

可能不会响应式，您可以将元素分组到SVG中，因此每个矩形都是SVG内的<g>，具有自己的属性，并使用poly而不是旋转的矩形。 - Pogrindis

从你的fiddle来看，这不是SVG。 - Pogrindis

Answer 1

这是我如何做到基于响应式菱形网格布局（不需要JS或SVG）来保持形状的边界的方式：

演示

.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)将其“取消旋转”。

- web-tiki

---

谢谢！有没有办法使它响应式？ - shadeed9

@shadeed9 这是响应式的，调整fiddle中结果窗口的宽度，你会看到钻石的大小相应地改变。 - web-tiki

我的意思是重新排列钻石，在移动视图中，钻石太小了，内容无法阅读。 - shadeed9

@shadeed9 是的，使用媒体查询是可以实现的。他们应该如何重新排列？ - web-tiki

@shadeed9 很抱歉，我没有时间去做这个，但是可以使用媒体查询来实现。您可以用我提供的代码提一个新问题，肯定会有人来帮助您。 - web-tiki

哦，Web-Tiki和他的菜单。很快这也将成为一个代码库。 - Persijn

Answer 2

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

这样你就不需要依赖CSS来旋转它。

一旦绘制了SVG元素，CSS改变外观后就不会再进行操作。

在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上绘制。

- Pogrindis

---

我没有旋转它，SVG形状就像你制作的那样。我在CSS中所做的只是将其X和Y值进行平移。 - shadeed9

@shadeed9，你能展示一下SVG的构造函数吗？你的fiddle根本没有显示<svg>。 - Pogrindis

已更新。请检查此链接：https://dl.dropboxusercontent.com/u/35853519/rect.svg - shadeed9

@shadeed9 谢谢 Shadeed，那么你有两个选择，要么更新 SVG 颜色，要么像其他答案建议的那样旋转 HTML 元素！ :) - Pogrindis

Answer 3

你需要旋转链接本身。现在，你没有旋转任何东西，只是显示带有旋转框的图像。相反，使背景图像不旋转，并使用CSS旋转它们。

例如：

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

- Don Rhummy

Answer 4

你试过使用CSS旋转来限制矩形吗？现在你可以将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>

- cforcloud

---

有趣的想法！我已经应用它，但是我不确定问题出在哪里：请检查 fiddle：http://jsfiddle.net/shadeed9/pg94fpyc/6/ - shadeed9

变换旋转刚被覆盖。 - cforcloud