Javascript 创建四面体，每个形状链接到页面

[]

---

请看附件中的图片，我很难创建一组反应灵敏的三角形，形成一个四面体。我要链接到页面的每个三角形。中间的三角形将只是一个图像。非常感谢您的帮助，我已经到处找了，找不到任何这样的例子

您可以在图像上放置div，并使用

position:absolute

放置它们

这是我所做的一支笔（在第一个三角形中所做的）：

.myImg{
宽度：500px；
高度：400px；
背景：url（'https://i.stack.imgur.com/5cQ6H.jpg')
}
.左三角形{
位置：绝对位置；
顶部：40px；
左：60px；
宽度：0；
身高：0；
左边框：96px实心透明；
右边框：98px实心透明；
边框顶部：170px实心透明；
不透明度：0.5；
光标：指针；
z指数：20；
}
.左三角形：悬停{
边框顶部：170px纯黑；
}

以下是一个示例，无法使三角形靠得更近，并且滚动和底部三角形存在问题。非常感谢，效果很好。但是，我能在中间三角形上有悬停效果吗？还有，有没有什么方法可以负责任地做到这一点？对于这个奇怪的请求，我很抱歉，我不熟悉创建这样晦涩难懂的菜单。我不明白你想做什么。您需要将鼠标悬停在图像上还是形状上？如果您只需要将鼠标悬停在元素上而不是图像上，您可以这样做：谢谢您的帮助！我最终创建了SVG。容易多了。