javascript - 如何使用 CSS 创建一个三 Angular 形 div，它在单击时会消失，但在单击 'overflow' 部分时不会消失？

Question

这个答案在不同的线程上:https://stackoverflow.com/a/24808936/6401041说这种创建 CSS 三 Angular 形的方法很好，因为您可以“仅当光标位于三 Angular 形内时触发悬停状态或单击事件”，然后展示了如何完成此操作的演示与悬停状态。

我的问题基本上是这个:

/image/zYIS7.png

我不希望用户能够单击该区域并触发我的 onclick 函数，这会使我的三 Angular 形消失。我已经了解了如何使用 :hover 和 :active 来执行此操作，但没有使用 click 事件。我怎样才能做到只有当用户在三 Angular 形内部单击时，才会调用该函数，使三 Angular 形永远消失

style.visibility = "hidden";

非常感谢任何帮助

Answer 1

您可以使用 div 元素而不是伪元素来制作三 Angular 形。

fiddle

document.querySelector('.triangle').onclick = function() {
  this.style.display = "none";
}

.triangle-container {
  overflow: hidden;
  height: 100px;
}

.triangle {
  width: 100%;
  height: 100%;
  background-color: #0079C6;
  transform-origin: 0 100%;
  transform: rotate(45deg);
}

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