有没有办法改变 HTML 元素的 hitboxes 的形状？

Question

我正在做一个项目，里面有一颗钻石。它的形状是这样的：但是，您可以单击边界框中的任意位置来激活它。这很烦人，因为如果你把很多东西放在一起，它们会激活第一个创建的边界框，因为它的边界框与另一个边界框重叠。我正在寻找一个简单的函数来改变它的形状，无论是CSS还是JS，或者类似的解决方法。

Answer 1

你需要这样做clip-path

.box {

  width:200px;

  height:100px;

  display:inline-block;

  vertical-align:top;

  /* to create the borders*/

  background:

    linear-gradient(to top    left ,transparent 49%,#000 50%) top    left,

    linear-gradient(to top    right,transparent 49%,#000 50%) top    right,

    linear-gradient(to bottom left ,transparent 49%,#000 50%) bottom left,

    linear-gradient(to bottom right,transparent 49%,#000 50%) bottom right;

  background-size:calc(50% + 5px) calc(50% + 3px); /* control the border thickness here */

  background-repeat:no-repeat;

  background-color:red;

  

  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);

}

.box:hover {

  background-color:yellow;

}

<div class="box"></div>

<div class="box" style="margin:50px 0 0 -100px"></div>

<div class="box" style="margin:0 0 0 -100px"></div>