如何用HTML和CSS创建带内容、仅箭头区域可悬停的向上箭头形状Div？

方案1：CSS clip-path 裁剪矩形为箭头形状 #

直接通过CSS的clip-path属性把容器裁剪成箭头的多边形，这样只有箭头区域会响应悬停事件。

示例代码：

.arrow-container {
  width: 60px;
  height: 60px;
  background: #2196F3;
  /* 定义向上箭头的多边形路径：顶部中点、左下角、右下角 */
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  cursor: pointer;
  transition: background 0.3s;
}

.arrow-container:hover {
  background: #1976D2;
}

说明：polygon()里的坐标按顺时针顺序定义箭头的顶点，你可以根据实际需求调整数值来改变箭头的大小和比例。裁剪后，容器的交互区域会严格匹配箭头形状，不会触发矩形区域的悬停。

方案2：使用SVG绘制箭头 #

SVG天生支持自定义形状，且只有图形实际覆盖的区域会响应交互，适合需要更精细样式的场景。

示例代码：

<svg width="60" height="60" viewBox="0 0 60 60" style="cursor: pointer;">
  <!-- 用polygon绘制向上箭头，points属性定义三个顶点坐标 -->
  <polygon points="30,0 0,60 60,60" fill="#2196F3" style="transition: fill 0.3s;" />
  <style>
    polygon:hover {
      fill: #1976D2;
    }
  </style>
</svg>

说明：如果需要使用箭头图片，也可以在SVG中用<image>标签嵌入图片，配合<clipPath>标签裁剪出箭头形状，同样能实现仅箭头区域悬停的效果。

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