如何创建一个带有CSS的三角形div，它在点击时会消失，但是在点击“溢出”部分时却不会消失？

Question

这个答案在另一个主题上：https://stackoverflow.com/a/24808936/6401041说这种创建CSS三角形的方法很好，因为只有当光标在里面时你才能“触发悬停状态或单击事件三角形'然后显示一个演示如何使用悬停状态完成此操作。

我的问题基本上就是这个问题：

https://i.stack.imgur.com/zYIS7.png

我不希望用户能够点击该区域并触发我的onclick功能，这使我的三角形消失。我已经看到了如何执行此操作：悬停和：激活但不是单击事件。我怎样才能这样做，只有当用户点击三角形内部时，才会调用该函数，使三角形消失良好

style.visibility = "hidden";

非常感谢任何帮助

Answer 1

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

fiddle

＆＃13;

＆＃13;

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

＆＃13;

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;