Can CSS3 Triangles with Background Images Handle Clickable Transparent Areas?

Creating Triangle Shapes with Background Images

Question:

Designing a website with two triangular elements that contain background images and serve as clickable links becomes challenging when attempting to make the transparent portion of a triangle accessible to clicks. Can this design be achieved using CSS3 triangles with background images?

Answer:

Using Child Images:

To simplify the process and maintain compatibility with most browsers, a workaround is to use child images for the links instead of background images. This method involves creating the triangular shape using the transform skew property and offsetting the child images to compensate for the skew.

Steps:

• Create a container div with the appropriate dimensions (e.g., 900px width, 600px height).
• Add two child divs for the triangles and position them absolutely with transform origins on opposite corners.
• Skew each triangle by a specific angle calculated based on the triangle's height and width (in this example, -55.98deg).
• Create child images within each triangle and rotate them by the same angle as their parent divs.
• Set the overflow property to hidden for both the container and the triangle divs.

HTML:

<div>
<p><strong>CSS:</strong></p>
<pre class="brush:php;toolbar:false">.container {
  overflow: hidden;
  width: 900px;
  height: 600px;
}

.triangle, .triangle img {
  width: 100%;
  height: 100%;
}

.triangle {
  overflow: hidden;
  position: absolute;
  transform: skewX(-55.98deg);
}

.triangle:first-child {
  left: -.25em;
  transform-origin: 100% 0;
}

.triangle:last-child {
  right: -.25em;
  transform-origin: 0 100%;
}

.triangle img {
  transform: skewX(55.98deg);
  transform-origin: inherit;
}