Фоновое изображение с эффектом Hoverable

Question

Есть ли у вас идеи о том, как сделать этот тип рисунка?У меня есть только фоновое изображение, подобное этому, и я хочу, чтобы 4 светлоокрашенных шестиугольника были ссылкой.

Я уже пробовал использовать svg, но думаю, что это будет стоить мне больше времени на обновление его отзывчивости.

Я также искал другие способы (создание ячеистых шаблонов), но, похоже, не могу найти наилучшего возможного решения для этого.

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>