How to make a custom clickable shape with CSS to cover the exact needed area?

Question

I have to implement custom clickable area for my image in non standard shape (only for visible part of image). The shape is some part of the roof. I want to be able to do the click action only when I will hover over the shape.

Please see my example here in FIDDLE and see what I am doing wrong and how can it be done in better way? I have a problem with selection of transform parameters and with locating the clickable area just under the shape. How to do it correctly and to have an exact cover for needed shape?

Custom shape:

Example:

<div class="image">
  <div class="image_roof_left">
    <a class="link_roof_left" href="http://creation.cal24.pl/opencart/index.php?route=product/product&amp;product_id=50"></a>
    <img src="http://creation.cal24.pl/opencart/image/data/poc/dach_l1.png">
  </div>
</div>

div.image_roof_left {
    border: 1px solid;
    left: 120px;
    top: 10px;
    position: absolute;
    perspective: 150px;
    perspective-origin: 5% 0;
}
a.link_roof_left {
    background-color: rgba(0, 0, 0, 0.1);
    border: 1px solid;
    padding: 50px;
    position: absolute;
    transform: rotateX(82deg) rotateY(-19deg) rotateZ(-6deg) skewX(-63deg) skewY(2deg);
}

Answer 1

As jme11 suggested, its better if you use an image map, as the sides of this shape are straight lines.

Open the image in an image editor to find out the coords.

Snippet :

 <img src="http://creation.cal24.pl/opencart/image/data/poc/dach_l1.png" usemap="#map"> <map name="map"> <area shape="poly" coords="0,164,104,132,252,8,252,0,0,164" href="example.com" /> </map>