Comment créer des triangles planables avec des images d'arrière-plan en CSS3 ?

Création de triangles CSS3 avec des images d'arrière-plan pour des liens transparents en forme de triangle

Introduction

Améliorer l'esthétique de votre site Web avec un triangle interactif Les liens en forme peuvent rehausser son attrait visuel. Avec CSS3, vous pouvez facilement créer ces formes géométriques et incorporer des images d'arrière-plan pour ajouter de la profondeur et du charme.

Le défi des zones de survol transparentes

Cependant, un problème courant se pose lors de la création de triangles : impossibilité de survoler les parties transparentes des images de fond. Cet obstacle empêche les visiteurs d'accéder aux liens sous-jacents.

La solution : exploiter les images enfants

Pour surmonter ce défi, envisagez d'utiliser des images enfants pour vos liens au lieu d'images d'arrière-plan. . En mettant en œuvre cette approche, vous pouvez incliner indépendamment les éléments du triangle parent tout en conservant l'alignement de leurs liens d'image enfant.

Implémentation du code

Voici le code qui montre comment mettre en œuvre ceci technique :

HTML :

<div>

CSS pertinent :

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

Conclusion

En employant des images d'enfants pour vos liens et en les alignant habilement avec un triangle asymétrique éléments, vous pouvez obtenir une survolabilité transparente sur l’ensemble des formes triangulaires. Cette technique améliore l'interactivité et l'attrait visuel de votre site Web, offrant une expérience utilisateur plus engageante.

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!