如何使用 CSS 制作自定义可点击形状以覆盖确切需要的区域？

Question

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

请在 FIDDLE 中查看我的示例，看看我做错了什么以及如何以更好的方式完成？我在选择变换参数和定位形状正下方的可点击区域时遇到问题。如何正确地做到这一点并为所需的形状提供精确的覆盖？

自定义形状：

示例：

<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

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

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

片段：

<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>

如何使用 CSS 制作自定义可点击形状以覆盖确切需要的区域？

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

html

css

css-transforms

css-shapes