案例三 饼图效果
这个效果我们增加难度，和上面的效果类似，但增加到四个图像，而不是两个。
每个图像是一个圆的四分之一，鼠标悬停时，基于动画将一个图像转换为一个完整的圆，覆盖其余的图像。看起来是不是很炫酷呢，接下来开始具体的实现过程。
首先给整个元素增加 border-radius: 50%使其变为圆形。
然后是针对每个图像设置 clip-path 值，clip-path由七个点组成，其中三个点位于固定位置，如上图所示，默认就是一个三角形。当悬停时，修改剩余几个点的数值并加上过渡动画。
transition: transform .2s, clip-path .3s .2s, z-index 0s;
但是当它运行缓慢时，效果看起来不那么酷，但我们可以看到剪辑路径如何在形状之间进行变化的。以下是第一个图像的代码，其他的几个图像类似，只是对应方向的数值不同：
.gallery > img:nth-child(1) { clip-path: polygon(50% 50%, calc(50% * var(--_i, 0)) calc(120% * var(--_i, 0)), 0 calc(100% * var(--_i, 0)),0 0, 100% 0, 100% calc(100% * var(--_i, 0)), calc(100% - 50% * var(--_i, 0)) calc(120% * var(--_i, 0))); } .gallery > img:hover { --_i: 1; }
这里还是像往常一样，我使用一个变量来优化代码。变量将在0和1之间切换来达到更新多边形的效果。
案例四 多图镶嵌效果
这是一种艺术风格，各种各样的图像以不同的形状组合在一起。这个效果利用我们今天使用的CSS完全可以胜任！
基于上面的效果图，我们来分析每个图像的位置和大小。我们需要确定网格需要多少列和行数：
- 我们有两个大的图像放置在彼此旁边，每个填充一半的网格宽度和整个网格高度。这意味着可能需要 两列 和 单行。
- 中间的图像与另外两个图像重叠。这意味着我们需要 四列 和 单行。
- 最后两个图像各填充一半网格，就像前两个图像一样。但它们只有网格高度的一半。我们可以使用现有的列，但我们需要 两排。
这仅仅是我理解它的方式。我相信还有其他的配置可以得到同样的布局，有兴趣的同学可以用自己的思路实现看看。 基于以上我们定义的网格，然后将图像放在对应的网格上面：
.gallery { display: grid; grid: repeat(2, 1fr) / repeat(4, 1fr); aspect-ratio: 2; } .gallery img:nth-child(1) { grid-area: 1 / 1 / span 2 / span 2; } .gallery img:nth-child(2) { grid-area: 1 / 2 / span 2 / span 2; } .gallery img:nth-child(3) { grid-area: span 2 / span 2 / -1 / -1; } .gallery img:nth-child(4) { grid-area: 2 / 1 / span 1 / span 2; } .gallery img:nth-child(5) { grid-area: span 1 / span 2 / -1 / -1; }
看到这相信你已经发现我们使用相同方法的例子。我们定义了一个网格并将图像显式地放置在网格上，使用网格区域使图像重叠。最后将重叠的部分进行裁剪达到最终的目的。接下来就是裁剪的部分，我们总共有四个三角形和一个菱形。
完整代码：
.gallery img:nth-child(1) { grid-area: 1/1/span 2/span 2; clip-path: polygon(0 0,100% 0,0 100%); } .gallery img:nth-child(2) { grid-area: 1/2/span 2/span 2; clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%); } .gallery img:nth-child(3) { grid-area: span 2/span 2/-1/-1; clip-path: polygon(0 0,100% 0,100% 100%); } .gallery img:nth-child(4) { grid-area: 2/1/span 1/span 2; clip-path: polygon(50% 0,100% 100%,0 100%); } .gallery img:nth-child(5) { grid-area: span 1/span 2/-1/-1; clip-path: polygon(50% 0,100% 100%,0 100%); }
基于这个效果可以引出一个更为复杂的多图排版效果，此效果没有上面的对称效果，实现起来相对复杂一点。
但是核心的实现过程都是一样的，可以将整体按以下网格布局进行排列，有兴趣的同学可以自己实现看看。
总结
在整个系列中，我们探索了许多不同类型的图像网格，从基本的东西到我们今天制作的复杂马多图镶嵌。这里面的大量的CSS裁剪实践经验希望在你的项目中可以用到这些经验！
整体代码在线效果：code.juejin.cn/pen/7175445…
看完本文如果觉得有用，记得点个赞支持，收藏起来说不定哪天就用上啦～
