Есть ли способ изменить форму хитбоксов для 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>