gn66 gn66 - 1 month ago 13
CSS Question

Hover and click on CSS triangle

I have a triangle with a javascript function that moves that image.

The issue is that the element has a square shape so click and hover state are triggered ouside the triangle (see the red part in following image) :

CSS triangle with wrong hover and click zone

How can I prevent hover and click outside the triangle shape and allow click/hover state only inside the triangle shape?

Answer

To prevent hover and click outside the CSS triangle you can use transforms to make the the triangle.

This technique is described here : CSS Triangles with transform rotate

The point is to use a wrapper with hidden overflow and rotate the clickable/hoverable element so that it actualy has a triangular shape and prevent the click event or hover state outside the triangle.

Demo: Click and hover on a CSS triangle

hover and click CSS triangle The hover state and click event are triggered only inside the triangle

.tr {
  width: 40%;
  padding-bottom: 28.2842712474619%; /* = width / sqrt(2) */
  position: relative;
  overflow: hidden;
}
.tr a {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: rgba(0, 122, 199, 0.7);
  transform-origin: 0 100%;
  transform: rotate(45deg);
  transition: background-color .3s;
}
/** hover effect **/
.tr a:hover {
  background: rgba(255, 165, 0, 0.7);
}
<div class="tr"><a href="#"></a></div>


Another approach would be to use an SVG with a clickable triangle :

#tr{
  fill:transparent;
  transition:fill .3s;
}
#tr:hover{
  fill: orange;
}

/** for the demo **/
html,body{height:100%;margin:0; padding:0;}
body{background:url('https://farm8.staticflickr.com/7435/13629508935_62a5ddf8ec_c.jpg') center no-repeat;background-size:contain;}
svg{display:block;width:30%;margin:0 auto;}
<svg viewbox="-2 -2 104 64">
  <a xlink:href="#">
    <polygon id="tr" points="50 0 100 60 0 60" fill="transparent" stroke="darkorange" stroke-width="2"/>
  </a>
</svg>

Comments