Как изменить курсор на указатель при наведении курсора на область фигуры?

Question

У меня есть треугольник на моей странице, и если пользователь наводит курсор на него, он должен изменить курсор на указатель. Пока все хорошо.

Треугольник выполнен в CSS:

#triangleShape {
  width: 0;
  height: 0;
  border-left: 300px solid transparent;
  border-right: 300px solid transparent;
  border-bottom: 400px solid rgb(18, 75, 35);
  cursor: pointer;
}

<div id="triangleShape"></div>

Таким образом, если пользователь наводит курсор на этот элемент div, он меняет курсор, но он должен менять курсор только тогда, когда пользователь наводит курсор на фактический зеленый треугольник. Я знаю, что этот CSS реагирует на весь div, но возможно ли это, чего я хочу достичь?

Answer 1

Вы можете рассмотреть SVG для создания формы, и у вас будет то, что вам нужно:

svg polygon{
  cursor: pointer;
}

<svg height="300" width="400">
  <polygon points="200,0 0,300 400,300" fill=green />
</svg>

Или рассмотрим clip-path:

.triangle {
  width: 400px;
  height: 300px;
  background: green;
  -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  cursor:pointer;
}

<div class="triangle"></div>

Answer 2

Это нормальное поведение, так как прозрачная рамка является частью вашего div.cursor: pointer будет реагировать на весь квадрат.

Вы можете использовать дочерний элемент (псевдоэлемент или тег привязки) и играть с overflow и transforms.

div {
  width: 300px;
  height: 300px;
  overflow: hidden;
}

div::before {
  cursor: pointer;
  content: ' ';
  display:block;
  height: 100%;
  background: green;
  transform: rotate(45deg) translateX(150px) translateY(150px)
}

<div></div>