如何僅傾斜 CSS 網格容器中圖像的末端？

消除多個傾斜影像分類的末端

在上一個問題中，找到了一種傾斜影像分類的解決方案。雖然程式碼允許調整每個影像的大小，但它沒有提供僅在容器內部傾斜最左側和最右側框的預期效果。

為了實現這一點，需要一個更精細的解決方案正如 CSS-Tricks 上發表的一篇文章所證明的那樣。此方法可以添加懸停效果和影像之間的間隙。

新程式碼

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

以上是如何僅傾斜 CSS 網格容器中圖像的末端？的詳細內容。更多資訊請關注PHP中文網其他相關文章！