Issue
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?
Thank you.
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>
Answered By - Paulie_D
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.