在上一个问题中，找到了一种倾斜图像分类的解决方案。虽然代码允许调整每个图像的大小，但它没有提供仅在容器内部倾斜最左侧和最右侧框的预期效果。
为了实现这一点，需要一个更精细的解决方案正如 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中文网其他相关文章！
