如何使用 CSS 仅倾斜图像库的末端？

矫正多个倾斜图像分类的末端

之前，设计了一种倾斜各种图像的方法，产生了令人满意的结果。然而，仍然存在一个挑战：如何仅倾斜容器的最左端 (box1) 和最右端 (box6)，同时保持内部部分不倾斜。

解决方案

为了解决这个问题，开发了一个完善的 CSS 解决方案：

 --s: 50px; /<em>控制倾斜部分</em>/<p>display: grid;<br>高度:350px;<br>间隙:8px;<br>grid-auto-flow:column;<br>地点项目：center;<br>}<br>.gallery > img {<br> 宽度: 0;<br> 最小宽度: calc(100% var(--s));<br> 高度: 0;<br> 最小高度: 100%;<br> 对象-适合: 覆盖;<br> 剪辑路径: 多边形(var(--s) 0,100% 0,calc(100% - var(--s)) 100%,0 100%);<br> 光标: 指针;<br> 过渡: .5s;<br>}<br>.gallery > img:hover {<br> 宽度: 15vw; <br>}<br>.画廊> img:first-child {<br> 最小宽度: calc(100% var(--s)/2);<br> place-self: start;<br> 剪辑路径: 多边形(0 0,100% 0, calc(100% - var(--s)) 100%,0 100%);<br>}<br>.画廊> img:last-child {<br> 最小宽度: calc(100% var(--s)/2);<br> place-self: end;<br> 剪辑路径: 多边形(var(--s) ) 0,100% 0,100% 100%,0 100%);<br>}</p><p>身体{<br> 边距：0；<br> 最小高度：100vh；<br> 显示：网格；<br> 对齐内容：中心；<br> 背景：#ECD078；<br>}</p>

；

<img src="/static/imghwm/default1.png" data-src="https://picsum.photos/id/433/600/400?x-oss-process=image/resize,p_40" class="lazy" alt="如何使用 CSS 仅倾斜图像库的末端？"><br> <img src="/static/imghwm/default1.png" data-src="https://picsum.photos/id/1074/600/400?x-oss-process=image/resize,p_40" class="lazy" alt="如何使用 CSS 仅倾斜图像库的末端？"><br> <img src="/static/imghwm/default1.png" data-src="https://picsum.photos/id/1074/600/400?x-oss-process=image/resize,p_40" class="lazy" alt="如何使用 CSS 仅倾斜图像库的末端？"><br> <img src="/static/imghwm/default1.png" data-src="https://picsum.photos/id/659/600/400?x-oss-process=image/resize,p_40" class="lazy" alt="如何使用 CSS 仅倾斜图像库的末端？"><br> <img src="/static/imghwm/default1.png" data-src="https://picsum.photos/id/659/600/400?x-oss-process=image/resize,p_40" class="lazy" alt="如何使用 CSS 仅倾斜图像库的末端？"><br> <img src="https://picsum.photos/id/593/600%20/400?x-oss-process=image/resize,p_40" alt="如何使用 CSS 仅倾斜图像库的末端？"><br>

此代码定义了一个包含六个图像的 CSS 网格。网格配置了图像之间的间隙和将图像置于网格单元中心的放置项目属性。每个图像的宽度为 0，最小宽度为 100% 加上变量 --s 的值，高度为 0，最小高度为 100%。 object-fit 属性设置为 cover，确保图像填充可用空间，同时保持其纵横比。

clip-path 属性用于创建倾斜形状。对于每个图像，多边形指定定义形状的四个边的四个点。 --s 的值控制容器开头和结尾处倾斜部分的宽度，允许您微调其外观。

:hover 样式规则应用于悬停时的图像，增加它们的宽度使它们更加突出。 :first-child 和 :last-child 样式调整第一个和最后一个图像的剪辑路径，以在容器边缘产生所需的倾斜效果。

此解决方案有几个优点：它允许响应式设计，保留图像的纵横比，并提供对倾斜形状外观的控制。

以上是如何使用 CSS 仅倾斜图像库的末端？的详细内容。更多信息请关注PHP中文网其他相关文章！