Diagonal Interactive Blocks in HTML

Question

I need white blocks to respond to click and hover events, but as we all know, the DOM is all rectangular blocks. So I'm really not sure how to approach this. Diagonal lines make it difficult because I cannot just put negative fields in img elements and overlap them, because then the areas with interactive access will overlap.

I am open to solving with JS / Jquery IF.

EDIT: Unfortunately, I cannot rely solely on CSS3.

Thanks in advance!

Solution This is just an excerpt from the fact that I actually made it a little messy, but here you go. As noted below, I decided to follow the CSS3 path, as it wears out gracefully.

Demo: http://jsfiddle.net/4Vgdu/1/

Answer 1

You can use the skewX attribute of the css3 transform property:

skewX examples

and then just apply the mousemove event on the converted div

Answer 2

I read that you cannot use CSS3 because you need to support IE.

You can skew in IE6 and use matrix filters . Not sure how interactivity will work, but worth a try.

You can easily translate the skewed matrix of the IE filter with this tool:

http://www.useragentman.com/IETransformsTranslator/

(does not work in Chrome, use Firefox).

If interactivity handles fine, then filters + CSS3 skew can achieve what you need (mostly) for a cross browser.

Answer 3

You can use the <area> to indicate the coordinates of any shape, without the need for CSS3 - see here: http://www.tutorialspoint.com/html/html_area_tag.htm

Answer 4

As Oddant said, transform: skew() is probably the best choice if you can rely on CSS3.

If, on the other hand, you cannot use CSS3 support or you want the content of the field not to be distorted, you can only approach click areas, as in the example sent by Jawad .

Answer 5

I assume that you know the coordinates of all your shapes, so you can just create a parent element for a click, or mousemove or any other event, and use a little math to figure out which mouse element at the moment I can’t say that I know an equation to determine if a point is in the shape of my head, but I'm sure it is.