Les triangles CSS3 avec images d'arrière-plan peuvent-ils gérer les zones transparentes cliquables ?

Création de formes triangulaires avec des images d'arrière-plan

Question :

Concevoir un site Web avec deux triangles Les éléments qui contiennent des images d'arrière-plan et servent de liens cliquables deviennent difficiles lorsque l'on tente de rendre la partie transparente d'un triangle accessible aux clics. Cette conception peut-elle être réalisée en utilisant des triangles CSS3 avec des images d'arrière-plan ?

Réponse :

Utilisation d'images enfants :

Pour simplifier le processus et maintenir la compatibilité avec la plupart des navigateurs, une solution de contournement consiste à utiliser des images enfants pour les liens au lieu d'images d'arrière-plan. Cette méthode consiste à créer la forme triangulaire à l'aide de la propriété transform skew et à décaler les images enfants pour compenser l'inclinaison.

Étapes :

• Créer un conteneur div avec les dimensions appropriées (par exemple, 900 px de largeur, 600 px de hauteur).
• Ajoutez deux divs enfants pour les triangles et positionnez-les de manière absolue avec des origines de transformation sur les coins opposés.
• Inclinez chaque triangle d'un point spécifique. angle calculé en fonction de la hauteur et de la largeur du triangle (dans cet exemple, -55,98 degrés).
• Créez des images enfants dans chaque triangle et faites-les pivoter du même angle que leurs divs parents.
• Définissez la propriété de débordement doit être masquée pour le conteneur et les divs triangulaires.

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!