有没有一种方法可以更改HTML元素的点击框的形状？

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>