How to Create Triangle Shapes with Background Images Using CSS3?

Barbara Streisand
Release: 2024-11-11 00:39:02
Original
914 people have browsed it

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>
Copy after login

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;
}
Copy after login

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!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template