How to Create Triangular Images with Background Images Using CSS?

Creating Triangular Images with Background Images Using CSS

In this project, we are aiming to create two triangular images with background images that act as links. The design mockup shows these triangles in a specific arrangement:

[Image of triangular images with background images]

Initially, we attempted to achieve this using divs and applying background images to them. However, this approach presented a challenge in hovering over the transparent part of the image to reach the underlying link.

CSS3 Triangles with Background Images: A Viable Solution

Yes, it is possible to accomplish this design using CSS3 triangles and set their background images. The custom shapes are indeed created using borders with a specified border-color.

Code Implementation for CSS3 Triangles with Background Images

Here is the code necessary to implement the triangular images with background images using CSS:

.pageOption {
  position: relative;
  width: 900px;
  height: 600px;
}

.pageOption .photo {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 900px;
  height: 600px;
  background: url('../images/menuPhoto.png') no-repeat 0 0;
}

.pageOption .cinema {
  position: absolute;
  bottom: 0px;
  right: 0px;
  width: 900px;
  height: 600px;
  background: url('../images/menuCinema.png') no-repeat 0 0;
}

Alternative Approach Using Child Images and Skew Transformation

An alternative approach is to use child images for the links instead of background images. This involves skewing the .option elements with different transform origins, unskewing their child images, and setting overflow: hidden on both the .pageOption and the .option elements.

HTML:

<div>

CSS:

.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 approach provides a cleaner solution with improved support across different browsers, excluding IE8/7 and Opera Mini.

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