重叠图像

Question

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

Sample Navigation Image

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图像。如果您需要支持较旧的IE，请将事件处理程序放在<area>元素上。