Html 重叠图像

我正在尝试使用不规则（非矩形）按钮编写导航代码。这些边在Y轴上相互重叠，所以我不确定如何在HTML/CSS中实现这一点。我可以用图像地图，但我不想用。有人能给我指一下正确的方向吗？谢谢（我在这里包括了图片链接）：

以下是一些选项：

将单个图像与图像贴图一起使用

使用已应用CSS旋转变换的重叠div。将单击处理程序添加到这些div

使用SVG形状并对其应用链接。我添加了一个示例

---

演示：

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

元素上。

对于向后兼容性，只有第一种选择applies@yunzen显然这不是必需的。什么证据？IE lte中不支持CSS转换或SVG8@yunzenFF、Safari和Chrome的当前浏览器。IE9+用于IE他刚刚用这个回复了你。你错过了吗。在针对目标浏览器提出问题之前，我对此进行了评论。2.它显然不向后兼容。不是关于这个特殊的问题，而是一般的问题。目标浏览器是什么？有没有旧的IE？FF、Safari和Chrome的当前浏览器。IE的IE9+。这是你的愿望清单还是你客户的承诺？

<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>