Make Only Triangle Have Hover Effect using CSS [duplicate] - html

Question

This question already has answers here:
Hover and click on CSS triangle
(4 answers)
Closed 7 years ago.
I am in quite the quandary! I would like to add cursor: pointer to my CSS, but the problem is it is a triangle. If I used the following:
#triangleholder {
width: 100px;
height: 100px;
border: 1px solid red;
}
#triangle {
width: 0;
height: 0;
border-right: 50px solid transparent;
border-left: 50px solid transparent;
border-bottom: 50px solid blue;
cursor: pointer;
}
<div id="triangleholder">
<div id="triangle">
</div>
</div>
The whole triangle and everything around it has the "Cursor" affect, how can I make only the triangle have the hover affect?

Answer 1

This can be done with pure CSS if we construct the triangle using transforms and overflow:hidden
FIDDLE
#triangleholder {
width: 100px;
height: 100px;
border: 1px solid red;
}
#triangle {
position: relative;
height: 50px;
overflow: hidden;
}
#triangle:before {
content: '';
position: absolute;
width: 71px; /*using pythagorus: sqrt( (100^2) /2 ) */
height: 71px;
background: blue;
transform: rotate(45deg)translateX(29%);
cursor: pointer;
}
<div id="triangleholder">
<div id="triangle">
</div>
</div>
NB: The code: translateX(29%) is used to place the rotated blue square back into the center of the container after it is rotated. This value seems to be constant even if we change the dimensions of the container (FIDDLE)

Answer 2

Use SVG or CSS3 to draw the arrow. Give that element cursor: pointer give the div wrapper non-cursor
Relevant article to implement this: http://www.smashingmagazine.com/2014/11/03/styling-and-animating-svgs-with-css/

Answer 3

You could mask the non-triangle areas with pseudo elements, with cursor: default set on them. You'd need to add overflow: hidden to the wrapping element to contain the masks, and of course it relies on the background being a flat colour and the shape you want to mask being a perfect triangle. Not massively extensible and a bit hacky, but it gets the specific result you're after.
#triangleholder {
// ..
overflow: hidden;
}
#triangle {
// ..
position: relative;
}
#triangle:before, #triangle:after {
content: "";
display: block;
position: absolute;
background: white;
width: 100px;
height: 50px;
top: -10px;
cursor: default;
}
#triangle:before {
transform: rotate(-45deg);
right: 0;
}
#triangle:after {
transform: rotate(45deg);
left: 0;
}