营造弯曲的网格幻觉

这个有趣的探索展示了使用 CSS 重现视错觉效果的各种方法。

Adam Argyle

我们将从这篇博文中获得一点乐趣！有 100 种方法可以实现这种视觉错觉，我只是想与您分享我的想法，但鼓励您尝试一下自己的风格。试用演示版并查看源代码。

如果你更喜欢视频，可以参考本博文的 YouTube 版本：

概览

这种错觉的名称是 Cafe Wall Illusion。不过，我们的眼睛可以感知斜向，而在任何地方都找不到弯曲的线条。这或许很难相信，但重建它肯定能帮助您透过这个幻觉。

Markup

HTML 代码采用简单的行和列。<body> 是包含 <div class="row"> 的容器，用于存储子项。每行包含五个 <div class="square"> 元素。

<div class="row">
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
</div>
…

风格

我之所以选择 CSS 网格，是因为它在行的呈现样式下看起来很合适，而且它还具有 justify-content，这似乎是偏移行子项的好方法。

车身造型

从正文样式开始，我使用 display: grid 和 grid-auto-rows 提供行布局。您看到的行大小 calc() 会考虑每行的边框，并且有助于效果适应整个视口。

body {
  display: grid;
  grid-auto-rows: calc(20vh - 4px);
  gap: 4px;
  background: gray;
  margin: 0;
}

行样式

在这里，我再次选择了网格，但我并未使用它创建行，而是使用 grid-auto-flow: column 将方向更改为列。然后，我定义了列大小，并为相应行添加了一点内嵌内边距，以便框不会进入视口边缘。然后，我定位某些行，并将内容对齐到 center 或 end，从而创建该偏移量，从而营造错觉。

.row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 9vw;
  padding-inline: 4vw;
  gap: 10vw;
  background: white;
}

.row:nth-child(even) {
  justify-content: center;
}

.row:nth-child(3n) {
  justify-content: end;
}

方形样式

现在，唯一要做的就是更改方块颜色并添加边框：

.square {
  border-inline: 4px solid gray;
  background: black;
}

总结

现在你已经知道我是怎么做的，你知道该怎么做呢？！🙂? 浮动？Flexbox？渐变？！

让我们来了解一下我们采用的方法多样化，并了解在 Web 上构建网站的所有方法。

只需创建一个演示，点击 tweet me 链接，我就会将其添加到下方的“社区混剪”部分中！

社区混剪作品