Html 如何使用CSS制作定制的可点击形状，以覆盖所需的确切区域？

我必须为非标准形状的图像实现自定义可点击区域（仅适用于图像的可见部分）。这个形状是屋顶的一部分。我希望只有当我将鼠标悬停在形状上时才能执行单击操作

请看我在这里的例子，看看我做错了什么，怎样才能做得更好？我对变换参数的选择和形状下方可点击区域的定位有问题。如何正确地做它，并有一个确切的封面所需的形状

自定义形状：

<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);
}

示例：

<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);
}

分区图像\屋顶\左侧{
边框：1px实心；
左：120px；
顶部：10px；
位置：绝对位置；
透视图：150px；
透视原点：5%0；
}
a、 连接天窗左{
背景色：rgba（0,0,0,0.1）；
边框：1px实心；
填充：50px；
位置：绝对位置；
变换：rotateX（82度）rotateY（-19度）rotateZ（-6度）skewX（-63度）skewY（2度）；
}

正如jme11所建议的那样，最好使用图像贴图，因为此形状的边是直线

在图像编辑器中打开图像以查找坐标

片段：

<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);
}

---

正如jme11所建议的那样，最好使用图像贴图，因为此形状的边是直线

在图像编辑器中打开图像以查找坐标

片段：

<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);
}

一张图像地图怎么样？一张图像地图怎么样？完美，对我来说应该很好完美，对我来说应该很好