Question

假设我有几个这样定位的三角形：

每个三角形都是一个DIV，并使用CSS定位。现在，我需要更改每个DIV的可单击区域，因为DIV是矩形，但我显示了三角形。那怎么可能？是吗？：）

完整的HTML由Vanilla JS创建，此外，我想为每个三角形添加一个click事件。

<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始终是矩形，尽管您可以给它们一个边界半径以产生圆，半圆，圆角矩形等。

如果您真的想要三角点击，我建议您使用svg而不是div样式。使用svg，您可以按像素精度检测单个形状上的点击。

Answer 2

在SVG中执行此操作将允许检测每个像素的点击，而div则无法实现。

可以直接使用它们的点对三角形进行定位，但是使每个“上”和“下”三角形都使用相同的点通常会更容易，并将其放入转换中以使其更容易定位。

JSFiddle：https://jsfiddle.net/moertx29/

HTML：

<svg>
  <g transform="translate(75 0)">
    <polygon class="up" points="75,0 0,150 150,150" onclick="alert('1')" />
  </g>
  <g transform="translate(0 150)">
    <polygon class="up" points="75,0 0,150 150,150" onclick="alert('2')" />
  </g>
  <g transform="translate(75 150)">
    <polygon class="down" points="0,0 150,0 75,150" onclick="alert('3')" />
  </g>
  <g transform="translate(150 150)">
    <polygon class="up" points="75,0 0,150 150,150" onclick="alert('4')" />
  </g>
</svg>

CSS：

svg {
  height:500px;
  width:500px;
}

polygon {
  stroke:purple;
  stroke-width:1;
  cursor:pointer;
}

polygon.down {
  fill:red;
}

polygon.up {
  fill:yellow;
}

Answer 3

这是您的操作方式：

这里是小提琴：https://jsfiddle.net/w65nkp94/1/

代码如下：

HTML：

<body>
<a href=""><div class="triangleUp"></div></a>
<a href=""><div class="triangleDown"></div></a>
<a href=""><div class="triangleUp"></div></a>
<a href=""><div class="triangleDown"></div></a>
</body>

CSS：

body {
  font-size:0;
  margin:50px;
}

.triangleUp {
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-bottom: 50px solid #555;
  position:relative;
  display:inline-block;
  margin-left:-25px;
}

.triangleDown {
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-top: 50px solid red;
  position:relative;
  display:inline-block;
  margin-left:-25px;
}

如果要添加javascript函数，请删除标记，然后向div添加一个“ onclick”事件，如下所示：

<body>
<div class="triangleUp" onclick="myFunction()"></div>
<div class="triangleDown" onclick="myFunction2()"></div>
<div class="triangleUp" onclick="myFunction3()"></div>
<div class="triangleDown" onclick="myFunction4()"></div>
</body>

非矩形对象的单击区域

3 个答案: