如何使锚点链接匹配三角形图片尺寸或实现三角形可点击区域？

我明白你的困扰——默认情况下<a>标签是矩形的块级元素，哪怕你里面放的是三角形图片，它的可点击区域还是会覆盖整个矩形范围，这就导致了重叠区域的点击冲突（比如点左侧图片底部时触发了底部链接）。试过overflow:hidden和z-index没用很正常，因为这俩都没法改变元素的点击区域形状，下面给你两个靠谱的解决办法：

方法一：用CSS clip-path 裁剪锚点的可点击区域 #

clip-path可以直接定义元素的可见区域+可点击区域，完美匹配你的三角形形状。你只需要根据每个三角形的轮廓设置对应的多边形路径就行：

<style>
#card{
  width:472px;
  height:472px;
  display:grid;
  grid-template-columns:50% 50%;
  position: relative; /* 让底部链接的绝对定位基于容器 */
}

/* 左侧三角形：左上、右上、左下三个点 */
#card a:first-child {
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

/* 右侧三角形：右上、左上、右下三个点 */
#card a:nth-child(2) {
  clip-path: polygon(100% 0, 0 0, 100% 100%);
}

/* 底部三角形：左下、右下、顶部中点三个点 */
#l3{
  position:absolute;
  bottom:0;
  left:0;
  width: 100%; /* 铺满容器宽度 */
  clip-path: polygon(0 100%, 100% 100%, 50% 0);
}

/* 让图片填满链接容器，避免留白 */
#card a img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>

<div id="card">
  <a href="link1.html" >
    <img src="img/left.png">
  </a>
  <a href="link2.html">
    <img src="img/right.png">
  </a>
  <a href="link3.html" id="l3">
    <img src="img/bottom.png">
  </a>
</div>

小提示： #

• polygon()里的坐标是按x y顺序写的，你可以根据实际三角形的形状微调数值（比如如果底部三角形的顶点不是正中间，就把50%改成对应的百分比）。
• 把底部链接改成position:absolute是为了脱离grid布局的限制，让它能铺满整个容器底部，再用clip-path裁剪成三角形。

方法二：用SVG代替图片，原生支持形状点击区域 #

SVG本身的图形元素（比如<polygon>）的点击区域就是它的形状，完全不需要额外处理。如果需要保留图片的纹理，还可以把图片作为填充图案嵌入SVG：

<style>
#card{
  width:472px;
  height:472px;
  display:grid;
  grid-template-columns:50% 50%;
  position: relative;
}

#card svg {
  width: 100%;
  height: 100%;
}

#l3{
  position:absolute;
  bottom:0;
  left:0;
  width: 100%;
}
</style>

<div id="card">
  <a href="link1.html">
    <svg viewBox="0 0 100 100">
      <!-- 如果需要用图片当纹理，就加这段defs -->
      <defs>
        <pattern id="left-pattern" patternUnits="userSpaceOnUse" width="100" height="100">
          <image href="img/left.png" width="100" height="100" />
        </pattern>
      </defs>
      <!-- 定义左侧三角形，填充用图片纹理 -->
      <polygon points="0,0 100,0 0,100" fill="url(#left-pattern)" />
    </svg>
  </a>
  <a href="link2.html">
    <svg viewBox="0 0 100 100">
      <defs>
        <pattern id="right-pattern" patternUnits="userSpaceOnUse" width="100" height="100">
          <image href="img/right.png" width="100" height="100" />
        </pattern>
      </defs>
      <polygon points="100,0 0,0 100,100" fill="url(#right-pattern)" />
    </svg>
  </a>
  <a href="link3.html" id="l3">
    <svg viewBox="0 0 100 100">
      <defs>
        <pattern id="bottom-pattern" patternUnits="userSpaceOnUse" width="100" height="100">
          <image href="img/bottom.png" width="100" height="100" />
        </pattern>
      </defs>
      <polygon points="0,100 100,100 50,0" fill="url(#bottom-pattern)" />
    </svg>
  </a>
</div>

为什么之前的方法没用？ #

• overflow:hidden只是隐藏元素超出容器的部分，但元素的点击区域还是原始的矩形范围，所以没法解决问题。
• z-index只能调整元素的堆叠顺序，让某个链接优先被点击，但还是改变不了点击区域的形状，重叠区域的冲突依然存在。

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