Javascript 有没有办法在html/css中制作一个三角形的可点击框？

好的，所以我想开发一个门户网站页面，可以引导您访问我拥有的多个网站。我想这样设计：

---

其中每个部分都是一个带有JS的可点击部分，当鼠标悬停时，它会弹出一点并淡入某种图片中。不管怎么说，我的问题是，我怎样才能得到一个像这样的角度跳水？我读过关于使用边界技巧制作CSS三角形的文章，但我认为这不适用于此。我也在想是否有一种方法可以以某种方式使用CSS transform属性，但我不能在页面周围均匀地排列三角形，然后保持它的可伸缩性，从而使其具有响应性。有人有什么建议吗？或者这可能吗？？？

我找到了这个网站，也许它会有帮助：

---

我认为您也可以使用

位置：绝对
对齐不同的三角形。
CSS提供了一种称为剪辑遮罩的东西。这允许您移动过去的基本颜色形状，并允许图像的形状。当用作您想要的链接时，这看起来会很好

请参见有关剪辑路径的详细信息：

可在此处找到一个有用的站点，用于导出形状的实际CSS：

这与媒体查询的响应性和安排的绝对定位结合使用，应该可以让您达到您想要的位置
 你可以选择老派的方式，使用一个我实际上想用的方法，但它看起来很琐碎，太过时了：/n不，这不起作用，因为你不能按照我想要的方式正确定位它们，而且据我所知，边框不能是可点击的对象。但是，这很有希望，我无法在同一页上获得多个剪辑路径。我可以让图像的一个部分显示并可单击，但我希望所有四个部分（整个图像）都显示但可单击。请看我上面的插图。NVM，我刚想出来…我觉得很愚蠢，但我只是在其中添加了4个单独的图像，每个图像的每个角度都有一个剪辑路径，然后我将位置更改为绝对位置，以便它们相互配合。非常感谢@Lewis Lockhart的帮助！！：）太棒了-很高兴它有帮助。所以我遇到了另一个问题。您提供给我的方法非常有效，因为clip path:Shapes（）属性与explorer或edge不兼容。Edge仅支持URL（）源中的剪辑路径。我对SVG进行了大量的研究，以找出如何将SVG路径实现到html片段路径中，但我一生都无法找到它，也无法找到任何工作……你可能知道如何实现这一点吗？顺便说一句，这里是我到目前为止得到的：@Lewis