如何为HTML中CSS三角形的可见区域单独设置链接？

有两种靠谱的方法能解决这个问题，彻底摆脱矩形点击区域的困扰：

方法一：使用CSS clip-path #

clip-path 可以直接裁剪元素的可见区域和交互触发范围，把 <a> 标签裁剪成三角形后，只有三角形范围内会响应点击、光标变化。

示例代码：

<a href="#" class="triangle-link"></a>

<style>
.triangle-link {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: #2563eb;
  /* 裁剪成向上的三角形：三个顶点坐标为顶部中点、左下角、右下角 */
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  cursor: pointer;
}
</style>

你可以修改 polygon 里的坐标值，调整出不同方向的三角形（向下、向左、向右等），坐标支持百分比或具体像素值。

方法二：使用SVG #

SVG 天生支持精确的形状交互，直接用 <a> 标签包裹三角形图形，只有图形区域会触发链接行为，完全不会涉及多余的矩形区域。

示例代码：

<svg width="100" height="100" viewBox="0 0 100 100">
  <a href="#">
    <!-- 定义三角形的三个顶点，填充蓝色 -->
    <polygon points="50,0 0,100 100,100" fill="#2563eb" />
  </a>
</svg>

这种方法兼容性比 clip-path 更好，对旧浏览器友好，还能更灵活地调整三角形的形状、颜色和尺寸。

之前用 border 实现的三角形，本质是靠透明边框隐藏了矩形的部分区域，但元素本身还是矩形，所以点击区域会覆盖整个矩形。上面两种方法则是真正把交互区域限制在了三角形可见范围内，完美匹配你的需求。

内容的提问来源于stack exchange，提问作者Marcos Laredo