Лучший способ создания интерактивных непрямоугольных элементов HTML

Question

Я хотел бы создать фон для одной из моих HTML-страниц, как показано на рисунке, и когда пользователь наводит курсор на один из треугольных разделов, непрозрачность этого конкретного раздела будет меняться. Каков наилучший способ сделать это?

Answer 1

В SVG вы можете использовать элементы многоугольника для создания ваших треугольников в квадрате, и каждый многоугольник можно перемещать отдельно.

.square {
  height: 400px;
  width: 400px;
  overflow: hidden;
}
svg {
  height: 100%;
  width: 100%;
}
polygon {
  fill: aliceblue;
  stroke: crimson;
  stroke-linejoin: round;
}
polygon:hover {
  fill: cornflowerblue;
}

<div class='square'>
  <svg viewBox='0 0 100 100'>
    <a xlink:href='http://google.com'>
      <polygon points='5,5 50,50 95,5' />
    </a>
    <polygon points='5,5 50,50 5,95' />
    <polygon points='5,95 50,50 95,95' />
    <polygon points='95,5 50,50 95,95' />
  </svg>
</div>

Answer 2

Я бы использовал Adobe Illustrator, чтобы нарисовать / создать раздел / ы, которые вы хотите в качестве фона. Затем сохраните его в файле SVG.

Откройте файл SVG в браузере и скопируйте все теги в ваш HTML-файл. А затем используйте JS, Jquery, библиотеки, чтобы делать то, что вы хотите.

Пример?

Это мой дом http://www.triiio.it/