htmlcsshyperlinkcursortriangle

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?

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?

Solution

  • 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>