Highlighting a non-rectangular portion inside div on hover

I have a div ( rectangle ), and inside it I want to have a triangular shape. I want to highlight that on hover. How do I do that?I'm thinking of having 2 images with that same shape and different opacity and swapping them on hover. Would there be another way of doing this? can you have a non-rectangular shaped divs?
 
Top