html - 重叠图像

Question

我正在尝试使用不规则（非矩形）按钮对导航进行编码。边缘在 Y 轴上相互重叠，所以我不确定如何在 HTML/CSS 中执行此操作。我可以使用图像映射，但宁愿不使用。有人可以指出我正确的方向吗？谢谢！（我在这里包含了图片链接）：

示例导航图像

Answer 1

以下是一些选项：

1. 使用带有图像映射的单个图像
2. 使用应用了 CSS 旋转变换的覆盖 div。将点击处理程序添加到这些 div。
3. 使用 SVG 形状并将链接应用到它们。我添加了一个例子。

---

演示：http: //jsfiddle.net/Phu5x/

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<a xlink:href="/svg/index.html">
   <polygon points="15,10  95, 10  85, 30  5, 30"
        style="fill: red; stroke: black;"/>
 </a>
</svg>

Answer 2

如果您想要鼠标悬停效果，请尝试使用带有图像映射的单个透明 PNG 图像。<area>如果您需要对旧 IE 的支持，请将事件处理程序放在元素上。