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.

Answer 1

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.