Hover over a custom form. How?

Question

How to create a CSS triangle (for example) that will trigger a hover event only inside the borders of the triangle?

In practice, this will be the location on the game and various objects on it, which should be blurred if we aim it.

Note the demo that span:hover styles are triggered when you enter the borders of the rectangle of the element, not the triangle.

Answer 1

You can try to create a form with an SVG polygon , and :hover will respect its “true” area.

Note this is a pure css + SVG solution for custom shapes only. And the user form is not created with pure css, but SVG ...

A 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 will send some light in browser support. There are no accepted answers, but as far as I can see, there are very useful links and alternatives for browsers that do not support SVG.