Best way to create interactive non-rectangular HTML elements

Question

I would like to create a background to one of my HTML pages like the one shown in the picture, and when a user hovers over one of the triangular sections, the opacity of that specific section would change. What is the best way to do that?

Answer 1

In SVG, you could make use of the polygon elements to create your triangles within the square and each polygon is hover-able separately.

.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

I would use Adobe Illustrator to draw/create the section/s you want as a background. Then save it in a SVG file.

Open SVG file with a browser and copy all the tag in your HTML file. And then use JS, Jquery, libraries to do what you want.

Example?

This is my home www.triiio.it