Javascript 带有动画的马赛克几何菜单

我试图重新描述一下：

PS：如果可能，我想在悬停时设置边框动画

我不知道该怎么做，我试过这个：

clip-path: polygon(0 0, 100% 0, 92% 86%, 6% 100%);

但正如您所看到的，这些形状超出了div box的限制

以下是我的尝试：

我想到了SVG，但菜单内容是动态的，所以可以更改文本

如果有人有想法：）

---

谢谢

我知道我要说的话是有害的，但我怀疑你所用的方法论是否会引导你走向成功。我认为您需要执行以下步骤以获得胜利：

使用画布

使用图片中的点和线确定所需的多边形和线

根据第2点描述的计划，在画布上绘制内容，但也不要忘记具有悬停状态

为画布创建鼠标移动和单击Javascript事件

`

---

`

你好，谢谢你的帮助！！这是否意味着文本将被绘制，链接将被添加到javascript中？是的，您可以绘制文本，这里的示例：，但我认为这是没有必要的，因为您可以使用绝对位置添加链接。

canvas.addEventListener('mousemove', function(e) {
    //Here comes your logic, the coordinates are e.clientX and e.clientY
});

canvas.addEventListener('click', function(e) {
    //Here comes your logic, the coordinates are e.clientX and e.clientY
});