Bagaimana untuk Memusingkan Hanya Hujung Imej dalam Bekas Grid CSS?

Membuka Hujung Pelbagai Imej Serong

Dalam soalan sebelum ini, penyelesaian didapati untuk menyerongkan pelbagai imej. Walaupun kod membenarkan setiap imej diubah saiznya, ia tidak memberikan kesan yang diingini untuk menyerong kotak paling kiri dan paling kanan secara eksklusif dalam bahagian dalam bekas.

Untuk mencapai ini, penyelesaian yang lebih halus telah dibuat, seperti yang ditunjukkan oleh artikel yang diterbitkan pada CSS-Tricks. Kaedah ini membolehkan penambahan kesan tuding dan jurang antara imej.

Kod Baharu

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

Atas ialah kandungan terperinci Bagaimana untuk Memusingkan Hanya Hujung Imej dalam Bekas Grid CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!