0

This answer on a different thread: https://stackoverflow.com/a/24808936/6401041 says that this method for creating a CSS triangle is good because you can 'trigger the hover state or click event only when the cursor is inside the triangle' and then a demo is shown for how this can be done with the hover state.

My problem is basically this one:

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

I don't want the user to be able to click in that area and trigger my onclick function which makes my triangle disappear. I have seen how to do this with :hover and :active but not with a click event. How can I make it so that only when the user clicks inside the triangle, does the function get called, making the triangle disappear for good with 

style.visibility = "hidden";

Any help is greatly appreciated

Dardan Bajraktari
  • 13
  • 4
  • 1
    You need to add a code sample for other users who need help. If that link becomes invalid people won't be able to solve their own related problems. – Rohan Shetty Jan 27 '18 at 18:57

1 Answers1

3

You can make the triangle with a divelement, instead of a pseudoelement.

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>
sol
  • 22,311
  • 6
  • 42
  • 59
  • woah thanks. But I have been doing it with a div until now... I see you've used a container though. And you've used jquery or something? Am I able to do the same thing as 'document.querySelector('') with document.getElementById(""); ? – Dardan Bajraktari Jan 27 '18 at 22:14
  • I've used javascript. You can give the container an Id and target it with `getElementById` instead. --> https://jsfiddle.net/uqh1mh5n/1/ – sol Jan 27 '18 at 22:23
  • Edit, meant you can give the triangle an id! – sol Jan 27 '18 at 22:29
  • Wow! Nice! Thank you. And do you need the container? – Dardan Bajraktari Jan 27 '18 at 23:06
  • Yes. Because you need overflow hidden to create the triangle effect. – sol Jan 27 '18 at 23:14