三角形的 CSS 网格
你现在可能知道，最大的窍门是找出clip-path我们想要的形状。对于这个网格，每个元素都有自己的clip-path值，而最后两个网格使用一致的形状。所以，这一次，就像我们正在处理几个不同的三角形形状，它们组合在一起形成一个矩形的图像网格。
我们使用以下 CSS 将它们放置在 3×2 网格中：
.gallery { display: grid; gap: 10px; grid-template-columns: auto auto auto; /* 3 columns */ place-items: center; } .gallery > img { width: 200px; /* controls the size */ aspect-ratio: 1; object-fit: cover; } /* the clip-path values */ .gallery > img:nth-child(1) { clip-path: polygon(0 0, 50% 0, 100% 100% ,0 100%); } .gallery > img:nth-child(2) { clip-path: polygon(0 0, 100% 0, 50% 100%); } .gallery > img:nth-child(3) { clip-path: polygon(50% 0, 100% 0, 100% 100%, 0 100%); } .gallery > img:nth-child(4) { clip-path: polygon(0 0, 100% 0, 50% 100%, 0 100%); } .gallery > img:nth-child(5) { clip-path: polygon(50% 0, 100% 100%, 0% 100%); } .gallery > img:nth-child(6) { clip-path: polygon(0 0, 100% 0 ,100% 100%, 50% 100%); } }
最终得到的效果如下图所示：
最后一点是使中间列的宽度等于0消除图像之间的空间。我们在菱形网格中遇到了同样的间距问题，但对我们使用的形状采用了不同的方法：
grid-template-columns: auto 0 auto;
最终的在线代码如下：
比萨形状的 CSS 网格
基于上面的三角形网格通过添加简单的border-radius和overflow就可以实现另一个很酷的网格，比萨形状的 CSS 网格。
拼图风格的 CSS 网格
这次我们将使用 CSS mask 属性来使图像看起来像拼图。
现在设置网格应该是小菜一碟，所以让我们把注意力集中在mask上。我们需要两个渐变来创建最终的拼图形状。一个渐变创建一个圆形（绿色部分），另一个渐变创建红色区域并填充半圆白色区域。
--g: 6px; /* controls the gap */ --r: 42px; /* control the circular shapes */ background: radial-gradient(var(--r) at left 50% bottom var(--r), green 95%, #0000), radial-gradient(calc(var(--r) + var(--g)) at calc(100% + var(--g)) 50%, #0000 95%, red) top/100% calc(100% - var(--r)) no-repeat;
两个变量控制形状。--g变量控制网格间隙，相对不是最重要的。重要的是考虑间隙之间如何正确放置我们的圆圈，以便在组装整个拼图时它们完美重叠。该--r变量则控制拼图形状的圆形部分的大小。
然后我们使用相同的 CSS 值并针对不同的位置稍加调整来创建其他三个形状：
此时整体拼图形状好了，但没有按我们的预期重叠在一起。因为每个图像都被限制在它所在的网格单元中，所以现在形状有点混乱是对的：
我们需要通过增加图像的高度/宽度来创建溢出。从上图中，我们必须增加第一个和第四个图像的高度，同时增加第二个和第三个图像的宽度。您可能已经猜到我们需要使用--r变量来增加它们。
.gallery > img:is(:nth-child(1),:nth-child(4)) { width: 100%; height: calc(100% + var(--r)); } .gallery > img:is(:nth-child(2),:nth-child(3)) { height: 100%; width: calc(100% + var(--r)); }
此时左边两张图片按预期展示了，但默认情况下，我们的图像要么在右侧（如果我们增加宽度）重叠，要么在底部（如果我们增加高度）重叠。但这不是我们想要的第二张和第四张图片。解决方法是在这两个图像上使用place-self: end，最后我们的完整代码如下：
最后来一个不一样的，为保障gif图加载速度，我将图片替换成纯色图像，这次我们使用clip-path，因为它是我们可以动画的属性，我们只需更新控制形状的自定义属性即可获得很酷的悬停效果。我们设置一个自定义变量控制默认的三角形的角度，在鼠标悬停时设置该变量为0则回到正常的正方形，效果图如下：
在线代码如下：code.juejin.cn/pen/7133195…
最后
本文通过将我们已经了解的有关 CSS Grid 的知识与一些附加clip-path的mask魔法相结合，我们能够制作不同形状的网格布局。而且我们每次都使用相同的 HTML 代码！代码本身只不过是一个包含少量图像元素的容器！看完是不是觉得很简单很神奇呢，有兴趣的同学可以自己试试看，兴许你能创造出更多有趣的网格图形。
看到最后如果觉得有用，记得点个赞收藏起来吧，说不定哪天就用上啦。
