关于HTML中的三角形，我看到了使用边框、翻译等解决方案，但没有人解决这个问题：如何设置仅指向三角形区域的链接？

Question

我想创建一个三角形并仅设置一个链接（更改光标等）到该三角形的可见区域，使透明区域保持不变且未链接。

所有解决方案这里，我尝试修改，但光标和链接都在所有矩形区域中，而不仅仅是在可见三角形中。 有没有可能做到这一点？

谢谢你。

Answer 1

使用剪辑路径

div {
  width: 200px;
  aspect-ratio: 1;
  background: red;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

div:hover {
  background: green;
}

<div></div>