营造弯曲的网格幻觉

探索如何使用 CSS 重现光学错觉的趣味课程。

在本博文中,我们将玩得开心一点!实现这种光学错觉的方法肯定有 100 种,我只会与您分享我的想法,但鼓励您尝试自己的风格。试用演示版查看源代码

如果您更喜欢视频,请观看此帖子的 YouTube 版本:

概览

这种错觉的名称是咖啡馆墙壁错觉。这张图片中没有任何弯曲的线条,但我们的眼睛却能感受到倾斜。这可能很难以置信,但重建它肯定有助于您看清幻象。

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: gridgrid-auto-rows 来提供行布局。您看到的行大小的 calc() 会考虑到每行边框,并有助于效果适应整个视口。

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

行样式

在这里,我再次选择了网格,但没有使用它创建行,而是使用 grid-auto-flow: column 将方向更改为列。然后,我定义列大小并向行添加一些内嵌内边距,以免框架超出视口边缘。然后,我定位到特定行,并将内容对齐到 centerend,从而产生这种错觉。

.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 上构建的所有方式。

制作一个演示版,在推特上向我发送链接,我会将其添加到下方的社区混剪部分!

社区混剪作品