How to Create CSS3 Triangle Shapes with Background Images and Ensure Clickability?

Triangle Shapes with Background Images

In a project, you need two triangles to function as links and to hold background images. The issue lies in the inability to hover over the transparent part of one triangle to access the link behind it. Here's how to achieve this design with CSS3 triangles and background images:

CSS3 triangles cannot be created with borders alone, which only allow for rectangular shapes. Instead, you can use child images for the links instead of background images. Here's the improved code:

<div class="pageOption">
  <a href="#" class="option" data-inf="photo">
    <img src="../images/menuPhoto.png">
  </a>
  <a href="#" class="option" data-inf="cinema">
    <img src="../images/menuCinema.png">
  </a>
</div>

The CSS responsible for the triangle shapes:

.pageOption {
  overflow: hidden;
  position: relative;
  width: 40em; height: 27em;
}
.option, .option img { width: 100%; height: 100%; }
.option {
  overflow: hidden;
  position: absolute;  
  /* arctan(27 / 40) = 34.01935deg 
   * need to skew by 90deg - 34.01935deg = 55.98065deg
  */
  transform: skewX(-55.98deg);
}
.option:first-child {
  left: -.25em;
  transform-origin: 100% 0;
}
.option:last-child {
  right: -.25em;
  transform-origin: 0 100%;
}
.option img {
  transform: skewX(55.98deg);
  transform-origin: inherit;
}

This solution utilizes the skew transform property to create CSS3 triangles. The images inside the options are then unskewed to compensate for the skewed container. By setting overflow to hidden on both the container and options, the images remain within the bounds of their respective areas.

The above is the detailed content of How to Create CSS3 Triangle Shapes with Background Images and Ensure Clickability?. For more information, please follow other related articles on the PHP Chinese website!