Comment créer des formes triangulaires avec des images d'arrière-plan à l'aide de CSS3 ?

Forme de triangle avec image d'arrière-plan : une approche CSS3

Votre objectif de créer deux triangles avec des images d'arrière-plan qui fonctionnent comme des liens est réalisable avec CSS3 triangles. Même si vous pensiez initialement que les formes personnalisées nécessitaient des bordures avec des couleurs de bordure, une approche différente est possible.

Solution avec des images enfants

Au lieu de vous fier aux images d'arrière-plan, envisagez d'utiliser des images enfants. images pour les triangles. Cette technique consiste à fausser les éléments .option avec différentes origines de transformation. Pour éviter toute inclinaison visible dans le résultat final, redressez les images enfants et appliquez overflow: Hidden aux éléments .pageOption et .option. Cette approche offre une large compatibilité avec les navigateurs, à l'exception d'IE8/7 et Opera Mini.

Structure HTML

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

CSS pertinent

.pageOption {
  overflow: hidden;
  position: relative;
  width: 40em;
  height: 27em;
}
.option, .option img {
  width: 100%;
  height: 100%;
}
.option {
  overflow: hidden;
  position: absolute;
  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 configuration CSS incline efficacement les triangles tout en redressant leurs images enfants, ce qui donne la forme de triangle souhaitée avec une survolabilité sur les régions transparentes. Les positions des triangles et les origines de transformation peuvent être ajustées pour obtenir différentes tailles et orientations de triangle.

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!