无需媒体查询的响应式六边形网格

^{在css-tip.com上了解更多 CSS 技巧}

我知道有很多文章详细介绍了如何创建六边形网格，但其中有多少是响应式的呢？只有少数，而且它们依赖于大量的媒体查询或 JS。

这是一个仅使用 CSS 的解决方案，可以实现自适应所有屏幕尺寸的响应式六边形网格。无需 JS、媒体查询和复杂的 HTML 代码。只需几行 CSS。

干得好

解释

<div class="main">
  <div class="container">
    <div></div>
    <div></div>
    ...
  </div>
</div>

.main {
  --s: 100px;  /* size of a hexagon */
  --m: 4px;    /* space between each heaxgon */
  --r: calc(var(--s)*3*1.1547/2 + 4*var(--m));
  display:flex;
}
.container div {
  width: var(--s);
  height: calc(var(--s)*1.1547); 
  margin: var(--m);
  display: inline-block;
  clip-path: polygon(0% 25%, 0% 75%, 50% 100%, 100% 75%, 100% 25%, 50% 0%);
  margin-bottom: calc(var(--m) - var(--s)*0.2885); 
}
.container::before {
  content: "";
  width: calc(var(--s)/2 + var(--m));
  float: left;
  height: 100%;
  shape-outside: repeating-linear-gradient(     
                  transparent 0 calc(var(--r) - 3px),      
                  #fff        0 var(--r));
}

[主要的]

这里没什么特别的。div我在这里定义了一些 CSS 变量，并且它需要是一个 flexbox 容器。

[容器]

这里没有 CSS，这是我们的弹性项目，它允许我们使用height:100%。

[div]

我们的六边形项目。宽度/高度由变量s( 1.15 ~ 1/cos(30deg)) 定义。我们使用^refclip-path创建六边形形状。最后，我们应用 a来创建与下一条线 ( ) 的重叠。margin-bottom0.2885 ~ tan(30deg)/2

到目前为止，一切都还不算太复杂。让我们进入有趣的部分！

[容器::之前]

我将应用浮动伪元素，shape-outside让六边形元素环绕特定形状，从而在线条之间创建完美的缩进。

一张图来说明：

我们的浮动元素需要填满整个容器，因此使用height:100%。网格的每个“偶数”行都需要一个缩进，其值等于六边形元素宽度的一半加上边距，这样我们就得到了width:calc(var(--s)/2 + var(--m))。

我们需要为每 2 条线重复该逻辑，并且 2 条线的高度为2 height of hexagon + 4 margin + 2 negative margin-bottom = 2xS/cos(30deg) + 4xM - 2xSxtan(30deg)/2

经过一些简化，我们得到了(3xS)/(2xcos(30deg)) + 4xM，这就是我们的r变量。这将创建一个内部透明、内部不透明shape-outside的重复渐变。[0, r - x][r - x, r]

不透明部分（蓝色矩形所示）将推动第二行的元素，从而创造出美丽的响应行为。

^{x可以具有任意值，但不能太大，以避免推挤第一行（1px应该可以解决问题，但为了避免舍入问题，我们使用更大的值）。}

就是这样！

除了响应之外，我们还可以轻松调整六边形项目的大小、它们之间的边距，并且由于我们处理的是空 div，所以我们可以在里面添加任何内容。

查看下面的帖子了解更多形状：

六边形及其他：响应式网格图案，无需媒体查询

Temani Afif 为《这就是学习》撰稿 ・ 2021 年 6 月 9 日

#css #html #webdev #教程

或者