如何使用HTML和CSS实现仅菱形形状内部区域可点击效果

核心问题说明 #

你当前代码的问题根源有两点：

• 可点击的<a>标签仅包裹了文字内容，没有覆盖整个菱形区域
• 菱形视觉效果是通过伪元素旋转变换实现的，但外层元素仍然是原始矩形盒模型，导致点击范围和视觉菱形不匹配；同时还存在重复使用id="diamond"的语法错误（id属性在单个页面内必须唯一）

修改后代码 #

CSS部分 #

* {
    box-sizing: border-box;
}
/* 外层点击容器，完整包裹菱形 */
.diamond-wrap {
  display: inline-block;
  text-decoration: none;
  color: #ffffff;
  font-weight: 700;
  font-family: Helvetica;
  /* 核心：裁剪点击范围为标准菱形，和视觉效果完全匹配 */
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.diamond {
  position: relative;
  height: 120px;
  width: 120px;
  text-align: center;
  font-size: 13PX;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.diamond:after {
  position: absolute;
  background-color: #ef1717;
  top: 10px;
  left: 10px;
  content: '';
  height: calc(100% - 22px);  
  width: calc(100% - 22px); 
  border-radius: 18%;
  transform: rotateX(45deg) rotateZ(45deg);
  z-index: -1;
}
/* hover效果迁移到类选择器，避免id重复问题 */
.diamond-wrap:hover {
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
}

HTML部分 #

<table style="width:99%;padding:5px;">
<tr>
<td>
  <a href=" " class="diamond-wrap" target="_blank" rel="noreferrer noopener">
    <div class="diamond">
      <div class="meet">lorem...</div>
    </div>
  </a>
</td>
<td>
  <a href=" " class="diamond-wrap" target="_blank" rel="noreferrer noopener">
    <div class="diamond">
      <div class="meet">lorem..</div>
    </div>
  </a>
</td>
<td>
  <a href=" " class="diamond-wrap" target="_blank" rel="noreferrer noopener">
    <div class="diamond">
      <div class="meet">lorem..</div>
    </div>
  </a>
</td>
<td>
  <a href=" " class="diamond-wrap" target="_blank" rel="noreferrer noopener">
    <div class="diamond">
      <div class="meet">lorem..</div>
    </div>
  </a>
</td>
<td>
  <a href=" " class="diamond-wrap" target="_blank" rel="noreferrer noopener">
    <div class="diamond">
      <div class="meet">lorem..</div>
    </div>
  </a>
</td>
<td>
  <a href=" " class="diamond-wrap" target="_blank" rel="noreferrer noopener">
    <div class="diamond">
      <div class="meet">lorem..</div>
    </div>
  </a>
</td>
</tr>
</table>

关键修改点说明 #

• 结构优化：删除冗余的空<a>标签，用单个diamond-wrap类的<a>完整包裹整个菱形容器，保证整个菱形都在点击元素范围内
• 点击范围控制：通过clip-path属性将点击容器裁剪为菱形，完全匹配视觉效果，不会出现点击范围超出菱形的问题
• 语法修正：移除重复的id="diamond"，将hover效果迁移到类选择器，符合HTML语法规范
• 布局修正：将.diamond的布局改为flex，垂直居中文字，无需额外设置margin-top

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