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

Création d'images triangulaires avec des images d'arrière-plan à l'aide de CSS

Dans ce projet, nous visons à créer deux images triangulaires avec des images d'arrière-plan qui agissent comme des liens. La maquette de conception montre ces triangles dans un arrangement spécifique :

[Image d'images triangulaires avec des images d'arrière-plan]

Au départ, nous avons tenté d'y parvenir en utilisant des divs et en leur appliquant des images d'arrière-plan. Cependant, cette approche présentait un défi en survolant la partie transparente de l'image pour atteindre le lien sous-jacent.

Triangles CSS3 avec images d'arrière-plan : une solution viable

Oui, il est possible d'accomplir cette conception en utilisant des triangles CSS3 et définissez leurs images d'arrière-plan. Les formes personnalisées sont en effet créées à l'aide de bordures avec une couleur de bordure spécifiée.

Implémentation du code pour les triangles CSS3 avec images d'arrière-plan

Voici le code nécessaire pour implémenter les images triangulaires avec des images d'arrière-plan en utilisant CSS :

.pageOption {
  position: relative;
  width: 900px;
  height: 600px;
}

.pageOption .photo {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 900px;
  height: 600px;
  background: url('../images/menuPhoto.png') no-repeat 0 0;
}

.pageOption .cinema {
  position: absolute;
  bottom: 0px;
  right: 0px;
  width: 900px;
  height: 600px;
  background: url('../images/menuCinema.png') no-repeat 0 0;
}

Approche alternative utilisant des images enfants et une transformation asymétrique

Une approche alternative consiste à utiliser des images enfants pour les liens au lieu d'images d'arrière-plan. Cela implique d'incliner les éléments .option avec différentes origines de transformation, de redresser leurs images enfants et de définir le débordement : masqué à la fois sur les éléments .pageOption et .option.

HTML :

<div>

CSS :

.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 approche fournit une solution plus propre avec une prise en charge améliorée sur différents navigateurs, à l'exclusion d'IE8/7 et d'Opera Mini.

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!