Make Only Triangle Have Hover Effect using CSS

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?

construct the triangle as an image using SVG - which is basically a file using CSS like references. Then the filename for the SVG file is used as a marker for the hover effects in CSS — Martin, Apr 20 '15 at 21:17
This helped me understand: http://codepen.io/chriscoyier/pen/lotjh Since you are interacting with the borders of the box, the box model still applies to the element. The cursor control is applied to the layout of the entire element. I think you will have to make a SVG as @Martin suggested since it will have a triangular border versus the DIV which is always a box model. — Twisty, Apr 20 '15 at 21:27

Danield · Accepted Answer · 2015-04-20T22:09:12.793

10

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)

edited Apr 20 '15 at 22:09

answered Apr 20 '15 at 21:31

Danield

121,619
37
226
255

Any idea on how I could add a border to the triangles? Preferably on just the two sides. – Michael Jones Apr 20 '15 at 23:11
just add a border to the rotated square: http://jsfiddle.net/8bmtupnr/3/ I have also added `box-sizing:border-box` – Danield Apr 20 '15 at 23:25
OMG Thank You!!! :D I totally didn't pay attention lol. – Michael Jones Apr 20 '15 at 23:43

Dr Upvote · Answer 2 · 2015-04-20T21:35:34.330

1

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/

edited Apr 20 '15 at 21:35

answered Apr 20 '15 at 21:26

Dr Upvote

8,023
24
91
204

score 0 · Answer 3 · answered Apr 20 '15 at 21:29

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;
}

Make Only Triangle Have Hover Effect using CSS

3 Answers3

FIDDLE