Make "polygon" collider for UI element

I have an image as a background for my UI panel. And it has complex shape. But if I try to click in some places where there are no UI elements, my objects behind UI wont react. So I assume my UI has this collider: http://take.ms/ou1jU
How can I make some kind of polygon collider for my UI element so it would not block objects that are behind it, but can be seen?

Example: http://take.ms/hv1yR - I cant click on the frog, because UI blocking it.

This class might be able to help you: GitHub - lucbloom/unity_image_with_hit_detection_on_shape: With this triangle hit-detector, we can now turn off "writable" on those big collection sprites. This is a big win for App size and memory footprint. Usage: On a Button, remove the Image component. Add a ImageWithHitDetectionOnShape component. Don't forget to patch up the <Missing Image> link the in the Button component again.

You can make your current UI element to just be a sprite instead of a UI element and write a script that implements IPointerClickHandler (or other similar event handlers for EventSystem) to handle the click (or other) events. This way you can add a polygon collider to your sprite and get the click events on the area covered by sprite only.

How do I setup collisions if I used the sprite as he initially suggested?