Notes:
- This is a replica of the animation of Chris Coyier (though I used simple home made javascript instead of jQuery; this page is missing all Chris' beautiful css-transitions, and has no way a responsible design): just to remember.
- This triangle method is using css2: an illustration of the "Border Slants article" (Lasse Reichstein Nielsen, 2003).
- Pro: as css2 it is cross browser nowadays (2013).
- For example you can use it for a clickable North/East/South/West figure like on the right side.
- Not only the triangle is hoverable/clickable, also the transparent borders!
You can toggle the background color of the triangles to see it better: the blue background areas are always hoverable and clickable. - With the triangles built in a container with an {overflow:hidden}, you can make the half of each triangle
box invisible (the top part of the North triangle, the left part of the West triangle, and so on).
You can toggle also (or simultaneously) the area if the overflow is hidden (in the figure the overflow is visible by default). - But it is impossible to get rid of the complementary 2 smaller triangles besides each triangle, and the whole area of the triangle rectangle is clickable, not only the colored triangle itself.
4 adjacent triangles (image)
- Con: this method is not useful in case of a design where only the triangle has to be clickable.
- This can be needed if the triangles have to be close together or adjacent, as in the "CSS only Direction aware hover"; of Paul O'Brien in this Sitepoint Forum topic.
- Then we can change the focus to the css3 method.