How to Create Triangle Shapes with Background Images Using CSS3?

Triangle Shape with Background Image: A CSS3 Approach

Your goal to create two triangles with background images that function as links is achievable with CSS3 triangles. While you initially presumed custom shapes required borders with border colors, a different approach is possible.

Solution with Child Images

Instead of relying on background images, consider using child images for the triangles. This technique involves skewing the .option elements with different transform origins. To prevent any visible skewing in the final result, unskew the child images and apply overflow: hidden to both the .pageOption and .option elements. This approach offers wide browser compatibility, except for IE8/7 and Opera Mini.

HTML Structure

<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>

Relevant CSS

.pageOption {
  overflow: hidden;
  position: relative;
  width: 40em;
  height: 27em;
}
.option, .option img {
  width: 100%;
  height: 100%;
}
.option {
  overflow: hidden;
  position: absolute;
  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 CSS configuration effectively skews the triangles while unskewing their child images, resulting in the desired triangle shape with hoverability on the transparent regions. Triangle positions and transform origins can be adjusted to achieve different triangle sizes and orientations.

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