html - 具有可悬停效果的背景图像图案

Question

你对如何制作这种图案有任何想法吗？我只有这样的背景图片，我希望 4 个浅色六边形作为链接。

我已经尝试过使用 svg，但我认为更新它的响应性会花费我更多的时间。

我还搜索了其他方法（创建蜂窝模式），但我似乎无法为此找到最佳解决方案。

标签： htmlcsssvgdesign-patternsclip-path

Answer 1

您可以创建 HTML 图像映射，并如下定义六边形的区域。

^{注意：我只输入右上角六边形的坐标。其他的将遵循相同的模式。}

<img src="https://i.stack.imgur.com/zGR9G.jpg" width="1024" height="527" usemap="#map">

<map name="map">
  <area href="https://stackoverflow.com" shape="poly"
        coords="834,146, 888,146, 914,192, 888,236 834,236, 810,192">
</map>