How to make overlapping background for custom shape on link hover

Question

Example of the image:

I have 2 links: 1 and 2
two background gradient images: blue-green and yellow-red.

After hovering on one of them (1 or 2) I want to have triangle with proper extention background.

e.g. when hovering on 1 I want to have begining of blue-green gradient triangle, same for 2 but proper position of gradient.

Answer 1

Making pure css shapes work by doing variously obscure things with border widths. I played around a bit trying to combine the triangle rules with the border gradient rules and couldn't get them to cooperate (in Chrome, anyways). The border image stuff works by slicing the image into 9 bits (4 corners, 4 edges and center); it always seems to override the transparent & angled edges that the hard shape border rules rely upon.

All that is to say that I don't have a solution for you, but you're probably out of luck as far as a pure css solution goes, even using CSS3. You're probably going to need some JS or image trickery to get the effect you're looking for.