Können CSS3-Dreiecke mit Hintergrundbildern anklickbare transparente Bereiche verarbeiten?

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>

CSS:

.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;
}

Das obige ist der detaillierte Inhalt vonKönnen CSS3-Dreiecke mit Hintergrundbildern anklickbare transparente Bereiche verarbeiten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!