About triangles in HTML, I saw solutions using borders, translate, etc, but no one solving this issue: how to set a link only to the triangle area?

Question

I want to create a triangle and set a link (changing cursor etc) only to the visible area of this triangle, leaving the transparent area untouched and unlinked.

All the solutions here, I tried to modify but the cursor and the link were in all the rectangle area, not only in the visible triangle. Is there any possibility to do that?

Answer 1

Use a clip path

div {
  width: 200px;
  aspect-ratio: 1;
  background: red;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

div:hover {
  background: green;
}

<div></div>