使用 CSS 网格构建六边形网格

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 200 美元的免费额度!

我认为网格是由矩形组成的,并带有贯穿其中的垂直和水平线。它们确实是这样的,但这并不意味着我们不能在网格上放置元素的方式以及之后对元素进行的操作方面进行巧妙的处理。

在这个由 Jesse Breneman 制作的演示中,通过使用数学设置网格列来创建六边形网格,使得每个块可以跨越三列和两行,从而使块以允许应用 clip-path 的方式重叠。这将块雕刻成一个与其他块等距的六边形。非常聪明。

而且,哈哈,Jesse 的域名真是太棒了。就我个人而言,我对在如此俗气的域名上撰写关于 CSS 的博客一无所知。

直接链接 →