使用 HTML 和 CSS 连接形状和图像的多种方法

不同的网站设计经常需要使用除正方形或矩形之外的形状来响应点击事件。也许您的网站有一些倾斜或弯曲的横幅，其中点击区域作为直角矩形会显得笨拙地过大。或者您有一个形状独特的大型徽标，您只想让该独特形状可点击。或者您有一个交互式图像，当点击它的不同区域时会产生不同的响应。

您可以使用未设置样式的<a>标签包围这些资源，以获得一个大小大致合适的可点击矩形。但是，您也可以使用不同的技术控制该区域的形状，确保点击区域的目标与屏幕上显示的内容完全匹配。

SVG 形状

如果您的点击目标是图像或图像的一部分，并且您可以选择 SVG 作为其格式，那么您已经对该元素在页面上的行为方式有了很大的控制权。使 SVG 的一部分可点击的最简单方法是向标记中添加一个SVG 超链接元素。这就像用<a>标签包装目标一样简单，就像包装嵌套的 html 元素一样。您的<a>标签可以围绕简单的形状或更复杂的路径。它可以围绕一组 SVG 元素或仅围绕一个元素。在本例中，靶心的链接围绕一个圆形元素，但更复杂的箭头形状由两个多边形和一个路径元素组成。

查看 CodePen 上 Bailey Jones 的示例
target svg (@bailey_jones)
在 CodePen 上。

请注意，我在此演示中使用了已弃用的xlink:href属性，以确保链接在 Safari 上有效。仅使用href可以在 Internet Explorer、Chrome 和 Firefox 中使用。

这里唯一的技巧是确保<a>标签位于 SVG 标记内，并且该标签包装您希望可点击的形状。此 SVG 的视区仍然是矩形，因此包装整个 SVG 元素不会产生相同的效果。

图像地图

假设您无法控制 SVG 标记，或者您需要向光栅图像添加可点击区域。可以使用图像地图将可点击目标应用于<img>标签的一部分。

图像地图与图像源分开定义。该地图将有效地覆盖整个图像元素，但由您定义可点击区域。与 SVG 示例中的超链接元素不同，图像地图中的坐标与源图像的定义无关。图像地图自 HTML 3 以来就存在，这意味着它们具有极好的浏览器支持。但是，它们不能仅使用 CSS 进行样式设置以提供交互式提示，就像我们使用 SVG 在悬停时所做的那样——光标是图像目标区域可以点击的唯一视觉指示器。但是，有一些使用 JavaScript 为区域设置样式的选项。

W3 Schools 有一个关于太阳系图片的图像地图的优秀示例，其中太阳和行星链接到这些目标的特写图像——图像中的其他所有位置都不可点击。这是因为其图像地图中定义的区域坐标与基本图像中太阳和行星的位置相匹配。

这是 Derek Fogge 的另一个示例，它使用地图创建更有趣的点击目标。它确实使用 jQuery 在点击时为区域设置样式，但请注意地图覆盖图像的方式以及用于创建目标的坐标。

查看 CodePen 上 Derek Fogge 的示例
响应式图像地图演示 (@PositionRelativ)
在 CodePen 上。

您也可以在更复杂的形状上实现图像地图。实际上，让我们回到 SVG 示例中相同的目标形状，但使用光栅图像代替。我们仍然希望链接箭头和靶心，但这次没有 SVG 元素来帮助我们。对于靶心，我们知道基础图像中的 X 和 Y 坐标及其半径，因此定义区域的圆形相当容易。箭头形状更复杂。我使用https://www.image-map.net绘制形状并生成图像地图的区域——它由一个多边形和一个圆形组成，用于顶部圆角。

查看 CodePen 上 Bailey Jones 的示例
target image map (@bailey_jones)
在 CodePen 上。

剪辑路径

如果您想使用 CSS 定义自定义点击区域的形状，而不诉诸 JavaScript 进行样式设置，该怎么办？CSS clip-path 属性为定义和设置任何 HTML 元素上的目标区域的样式提供了相当大的灵活性。

这里我们有一个五角星形状的点击区域。从技术上讲，星星是一个多边形，因此我们可以像在前面的图像地图示例中那样使用星形基础图像和相应的坐标图像地图。但是，让我们使用clip-path。以下示例显示了应用于 JPG 图像和绝对定位的超链接元素的相同clip-path。

查看 CodePen 上 Bailey Jones 的示例
Clip-path (@bailey_jones)
在 CodePen 上。

clip-path的浏览器支持已变得好得多，但对于某些值仍然可能不一致。在依赖它之前，请务必检查支持和供应商前缀。

我们还可以根据最适合特定点击目标形状的内容混合和匹配不同的方法。在这里，我结合使用了 Bennet Freely 的clippy中的“关闭”形状和 SVG 超链接元素来构建一个可点击井字游戏的开头。SVG 在这里很有用，以确保“O”形状中间的“孔”不可点击。但是，对于“X”（这是一个多边形），单个clip-path可以为其设置样式。

查看 CodePen 上 Bailey Jones 的示例
tic tac toe (@bailey_jones)
在 CodePen 上。

同样，请注意浏览器支持，尤其是在混合和匹配技术时。上面的演示并非在所有地方都受支持。

无透明边框的 CSS 形状

clip-path属性允许我们将预定义的形状应用于我们选择的 HTML 元素，包括超链接元素。创建不是正方形和矩形的 HTML 和 CSS 元素还有很多其他选项——您可以在CSS 的形状中看到其中一些。但是，并非所有技术都会以您期望的方式影响点击区域的形状。CSS 形状中的大多数示例都依赖于透明边框，即使用户看不到这些边框，DOM 仍会将其识别为点击目标的一部分。其他技巧（如定位、转换和伪元素（如::before和::after））将使您设置样式的超链接与其可见形状保持一致。

这是一个不依赖于透明边框的 CSS 心形。您可以看到红色心形是元素唯一可点击的区域。

查看 CodePen 上 Bailey Jones 的示例
Clickable heart (@bailey_jones)
在 CodePen 上。

这是另一个使用透明边框创建 CSS 三角形形状的示例。您可以看到点击区域最终位于实际形状之外。将鼠标悬停在元素上，您将能够看到点击区域的真实大小。

查看 CodePen 上 Bailey Jones 的示例
clickable triangle (@bailey_jones)
在 CodePen 上。

---

希望这能为您提供一个良好的基础，了解使用 HTML 和 CSS 创建图像和形状上的可点击区域的多种方法。您可能会发现需要使用 JavaScript 才能获得更高级的交互体验。但是，HTML、CSS 和 SVG 的组合功能为控制点击目标的精确形状提供了相当多的选项。