javascript - 非矩形对象的单击区域

Question

假设我有几个三 Angular 形的位置如下:

每个三 Angular 形都是一个 DIV，并使用 CSS 定位。现在我需要更改每个 DIV 的可点击区域，因为 DIV 是矩形，但我显示三 Angular 形。这怎么可能？是吗？ :)

完整的 HTML 是由 vanilla JS 创建的，而且我想为每个三 Angular 形添加一个点击事件。

<div id="Row_1" class="row">
    <div id="Field_1_1" class="field">
        <div class="triangle"></div>
    </div>
    <div id="Field_1_2" class="field">
        <div class="triangle"></div>
    </div>
</div>

Answer 1

Div 始终是矩形，尽管您可以给它们一个边框半径来生成圆形、半圆形、圆 Angular 矩形等。

如果您确实想要三 Angular 形级单击，我建议使用 svg 而不是样式 div。使用 svg，您可以以每像素的精度检测对各个形状的点击。