Is there a way to use CSS to generate a disappearing triangle-shaped div that will only vanish when clicked directly on the triangle and not when clicked on the surrounding overflow area?

Question

Is there a way to use CSS to generate a disappearing triangle-shaped div that will only vanish when clicked directly on the triangle and not when clicked on the surrounding overflow area?

In a different discussion, it was mentioned that the method used to create a CSS triangle allows for triggering the hover state or click event only when the cursor is inside the triangle. There is a demo provided to demonstrate this with the hover state.

Here is the issue I am facing:

https://i.sstatic.net/zYIS7.png

I do not want the user to be able to click in that specific area and inadvertently trigger my onclick function, which causes the triangle to disappear. While I have found solutions for hover and active states, I am struggling with implementing a click event. How can I ensure that the function is only called when the user clicks inside the triangle, resulting in the triangle disappearing when executed with:

style.visibility = "hidden";

Any assistance on this matter would be greatly valued.

javascript html css

Answer 1

Answer №1

To create a triangle shape, you can utilize a div element rather than a pseudoelement.

Check out the code snippet here

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>

Answer 2

To create a triangle shape, you can utilize a div element rather than a pseudoelement.

Check out the code snippet here

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>

Is there a way to use CSS to generate a disappearing triangle-shaped div that will only vanish when clicked directly on the triangle and not when clicked on the surrounding overflow area?

Answer №1

Similar questions

Troubleshooting font problems in Windows for customer support

Accessing local JSON data through JavaScript

Create an HTML container surrounding the content within the parent tags

Step-by-step guide to populating a JavaScript array with AJAX requests

Having trouble calculating the number of days between two dates at this moment

In what situations might a finally block fail to execute?

Having trouble calling REST API in node.js, whereas it works perfectly fine when called from the browser?

Disable the moving of the DIV button with a left-margin of 0px

How can I use query to swap out elements within a div when clicked?

Tips for Keeping Sub Menu Visible Without Having to Click

`In NodeJS, facing a challenge with implementing a many-to-many relationship using Sequelize's

The combination of NextAuth.js and Auth0 seems to be causing an issue with offline_access breaking

Displaying an array of JSON objects in ReactJS by parsing them

Passport.js: Navigating Users in the Right

Arrow not appearing when hovering over navigation bar in Bootstrap 4

Using Angular 2 to toggle the visibility of a component when hovering over and moving away from it

Step-by-step guide on retrieving the button text by utilizing a method call

Implementing a pop-up notification at the center of the display for empty fields

Guide to utilizing Materialize with Angular 2

Unraveling the mysteries of webpack configuration