如何使用CSS創建一個三角形div，它在單擊時會消失，但在單擊“溢出”部分時不會消失？

Question

這個在不同線程上的答案： https : //stackoverflow.com/a/24808936/6401041說，這種創建CSS三角形的方法很好，因為只有當光標位於三角形內部時，才可以'觸發懸停狀態或click事件 ”，然后顯示了一個演示如何使用懸停狀態進行演示。

我的問題基本上是這樣的：

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

我不希望用戶能夠在該區域中單擊並觸發使我的三角形消失的onclick函數。 我已經看過如何使用：hover和：active來做到這一點，但是沒有click事件 。 我怎樣才能做到，只有當用戶在三角形內單擊時，函數才會被調用，使三角形永久消失

style.visibility = "hidden";

任何幫助是極大的贊賞

Answer 1

您可以使用div元素代替偽元素來制作三角形。

小提琴

 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>