Comment incliner uniquement les extrémités des images dans un conteneur de grille CSS ?-tutoriel CSS-php.cn

Comment incliner uniquement les extrémités des images dans un conteneur de grille CSS ?

Mary-Kate Olsen

Libérer： 2024-12-10 17:49:11

original

576 Les gens l'ont consulté

How to Skew Only the Ends of Images in a CSS Grid Container?

Désincliner les extrémités d'un assortiment d'images asymétriques multiples

Dans une question précédente, une solution a été trouvée pour incliner un assortiment d'images. Bien que le code permette de redimensionner chaque image, il ne fournit pas l'effet souhaité consistant à incliner les cases les plus à gauche et à l'extrême droite exclusivement dans la partie intérieure du conteneur.

Pour y parvenir, une solution plus raffinée a été conçu, comme le démontre un article publié sur CSS-Tricks. Cette méthode permet d'ajouter des effets de survol et des espaces entre les images.

Le nouveau code

.gallery {
  --s: 50px; /* control the slanted part */  
  display: grid;
  height: 350px;
  gap: 8px;
  grid-auto-flow: column;
  place-items: center;
}
.gallery > img {
  width: 0;
  min-width: calc(100% + var(--s));
  height: 0;
  min-height: 100%;
  object-fit: cover;
  clip-path: polygon(var(--s) 0,100% 0,calc(100% - var(--s)) 100%,0 100%);
  cursor: pointer;
  transition: .5s;
}
.gallery > img:hover {
  width: 15vw; 
}
.gallery > img:first-child {
  min-width: calc(100% + var(--s)/2);
  place-self: start;
  clip-path: polygon(0 0,100% 0,calc(100% - var(--s)) 100%,0 100%);
}
.gallery > img:last-child {
  min-width: calc(100% + var(--s)/2);
  place-self: end;
  clip-path: polygon(var(--s) 0,100% 0,100% 100%,0 100%);
}

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  align-content: center;
  background: #ECD078;

Copier après la connexion

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!