尝试制作六角形CSS按钮，仅在六边形内使用hitbox

Question

我是css和javascript的新手，但我在这里看到了无数的六角形按钮，以及网络上的其他地方。我的问题是我有一个六角形图像，我希望在顶部有一个透明的六边形命中框，这样当我将鼠标悬停在六边形上时，它允许它被点击。到目前为止的每次尝试都会导致光标在六边形边界外变化（因为div /图像是矩形的。六边形的位置使得顶部和底部是平的，顶部是左右两边。角落中的透明三角形此图片也被注册为可点击。如果有人能就如何做到这一点给我一些建议，那就太棒了。