Hover to custom shape. How to?

Question

How do I create a CSS triangle (for example) which will trigger the hover event only inside the borders of the triangle?

In practise, it will be location on the game and different objects on it, which should blur if we hover it.

Notice in this demo that the span:hover styles trigger when entering the element's rectangle bounds, not triangle.

I don't think you can do it with elements and will probably have to use `canvas`. — Daniel Imms, May 07 '13 at 06:32
there are some tags that could work, `map` and `area`. http://www.w3schools.com/tags/tag_area.asp you can also draw a triangle. — Davor Mlinaric, May 07 '13 at 06:42
@DavorMlinaric try not to link to http://w3fools.com/, it makes the internet sad — Daniel Imms, May 07 '13 at 06:51

score 6 · Accepted Answer · edited May 23 '17 at 12:13

You could try to create the shape with SVG polygon, and :hover will respect his "true" area.

Note this is a pure css + SVG solution only for custom shapes. And the custom shape it isn't created with pure css, but SVG...

A little bit of html

<svg width="120" height="120"
     viewPort="0 0 120 120" version="1.1"
     xmlns="http://www.w3.org/2000/svg">
    <polygon points="60,0 0,120 120,120"  id="shape"/>
</svg>

Very simple CSS!

#shape:hover{fill:red;}

Here's a working fiddle.

Browser support: This question send some light to the browser support. There's no accepted answers, but as far I can see there are very useful links and alternatives for browsers that do not support SVG.

Hover to custom shape. How to?

1 Answers1