CSS tricks: Make triangles stand out with unique hover effects

Question

CSS tricks: Make triangles stand out with unique hover effects

I find myself in a bit of a conundrum! I want to incorporate cursor: pointer into my CSS, but the issue is that it's for a triangle shape. If I were to use the following code:

#triangleholder {
  width: 100px;
  height: 100px;
  border: 1px solid red;
}

#triangle {
  width: 0;
  height: 0;
  border-right: 50px solid transparent;
  border-left: 50px solid transparent;
  border-bottom: 50px solid blue;
  cursor: pointer;
}

<div id="triangleholder">
  <div id="triangle">
  </div>
</div>

The entire area surrounding the triangle responds to the "Cursor" effect, so how can I ensure that only the triangle itself has the hover effect?

html css css-shapes

Answer 1

Answer №1

Creating a triangle shape with pure CSS is possible by using transforms and overflow:hidden

Check out the demonstration on Fiddle

#triangleholder {
  width: 100px;
  height: 100px;
  border: 1px solid red;
}
#triangle {
  position: relative;
  height: 50px;
  overflow: hidden;
}
#triangle:before {
  content: '';
  position: absolute;
  width: 71px; /*calculating using Pythagorean theorem: sqrt( (100^2) /2 ) */
  height: 71px;
  background: blue;
  transform: rotate(45deg)translateX(29%);
  cursor: pointer;
}

<div id="triangleholder">
  <div id="triangle">
  </div>
</div>

Please Note: The code: translateX(29%) ensures that the rotated blue square is centered within the container even if its dimensions are changed (View an example on Fiddle)

Answer 2

Creating a triangle shape with pure CSS is possible by using transforms and overflow:hidden

Check out the demonstration on Fiddle

#triangleholder {
  width: 100px;
  height: 100px;
  border: 1px solid red;
}
#triangle {
  position: relative;
  height: 50px;
  overflow: hidden;
}
#triangle:before {
  content: '';
  position: absolute;
  width: 71px; /*calculating using Pythagorean theorem: sqrt( (100^2) /2 ) */
  height: 71px;
  background: blue;
  transform: rotate(45deg)translateX(29%);
  cursor: pointer;
}

<div id="triangleholder">
  <div id="triangle">
  </div>
</div>

Please Note: The code: translateX(29%) ensures that the rotated blue square is centered within the container even if its dimensions are changed (View an example on Fiddle)

Answer 3

Answer №2

Create an arrow using SVG or CSS3. Apply the style cursor: pointer to that element, and give the surrounding div a different cursor style.

To learn more about implementing this technique, check out the following article:

Answer 4

Create an arrow using SVG or CSS3. Apply the style cursor: pointer to that element, and give the surrounding div a different cursor style.

To learn more about implementing this technique, check out the following article:

Answer 5

Answer №3

To create the illusion of a triangle shape, you can use pseudo elements to overlay non-triangle areas with a solid color and set `cursor: default` on them. Make sure to enclose these elements within a container with `overflow: hidden` to contain the masks effectively. This method is not very flexible and may seem like a workaround, but it achieves the desired triangular effect.

#triangleholder {
  // ..
  overflow: hidden;
}

#triangle {
  // ..
  position: relative;
}
#triangle:before, #triangle:after {
  content: "";
  display: block;
  position: absolute;
  background: white;
  width: 100px;
  height: 50px;
  top: -10px;
  cursor: default;
}
#triangle:before {
  transform: rotate(-45deg);
  right: 0;
}
#triangle:after {
  transform: rotate(45deg);
  left: 0;
}

Answer 6

To create the illusion of a triangle shape, you can use pseudo elements to overlay non-triangle areas with a solid color and set `cursor: default` on them. Make sure to enclose these elements within a container with `overflow: hidden` to contain the masks effectively. This method is not very flexible and may seem like a workaround, but it achieves the desired triangular effect.

#triangleholder {
  // ..
  overflow: hidden;
}

#triangle {
  // ..
  position: relative;
}
#triangle:before, #triangle:after {
  content: "";
  display: block;
  position: absolute;
  background: white;
  width: 100px;
  height: 50px;
  top: -10px;
  cursor: default;
}
#triangle:before {
  transform: rotate(-45deg);
  right: 0;
}
#triangle:after {
  transform: rotate(45deg);
  left: 0;
}

CSS tricks: Make triangles stand out with unique hover effects

Answer №1

Check out the demonstration on Fiddle

Answer №2

Answer №3

Similar questions

Evaluate the user's answers to a database using a SQLite 3 C++ Quiz

Customize your popover content with Bootstrap settings

The previous button on Owl Carousel seems to be malfunctioning after navigating from a different page

Ways to ensure that the height of the second row in the second column matches that of the first column

Is Javascript necessary for submitting a form to a PHP script?

What are the disadvantages of not incorporating the main CSS file directly into the web page?

An issue occurred while trying to establish the referrer policy

Adaptable Navigation

CSS can always surprise with its unexpected animations

The nested div within the ui-view element is failing to expand to the entire width of the window

Using Jquery to Select Start and End Dates

Update JSON data in ng-blur event using AngularJS

Submitting hidden values and multiple values with checkboxes in HTML

Creating responsive divs on my webpage

Alter the style of a div by clicking on a button

The mouse pointer adjusts according to the event

Creating a table in VueJs and populating it with values retrieved from an MSSQL database in a .NET Core web application

What is preventing my HTML from rendering on the page?

The issue of jQuery pop-up not functioning properly on a web page that has infinite scrolling

The height of adjacent divs should be uniform, resize seamlessly, and contain an absolutely positioned element within