Comment créer des formes triangulaires CSS3 avec des images d'arrière-plan et garantir la cliquabilité ?

Formes triangulaires avec images d'arrière-plan

Dans un projet, vous avez besoin de deux triangles pour fonctionner comme des liens et contenir des images d'arrière-plan. Le problème réside dans l’impossibilité de survoler la partie transparente d’un triangle pour accéder au lien situé derrière celui-ci. Voici comment réaliser cette conception avec des triangles CSS3 et des images d'arrière-plan :

Les triangles CSS3 ne peuvent pas être créés avec des bordures uniquement, qui autorisent uniquement des formes rectangulaires. Au lieu de cela, vous pouvez utiliser des images enfants pour les liens au lieu d’images d’arrière-plan. Voici le code amélioré :

<div class="pageOption">
  <a href="#" class="option" data-inf="photo">
    <img src="../images/menuPhoto.png">
  </a>
  <a href="#" class="option" data-inf="cinema">
    <img src="../images/menuCinema.png">
  </a>
</div>

Le CSS responsable des formes triangulaires :

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

Cette solution utilise la propriété skew transform pour créer des triangles CSS3. Les images à l'intérieur des options ne sont ensuite pas asymétriques pour compenser le conteneur asymétrique. En définissant le débordement sur caché à la fois sur le conteneur et sur les options, les images restent dans les limites de leurs zones respectives.

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!