Make Only Triangle Have Hover Effect using CSS [duplicate]

Question

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/