有趣地探索如何使用 CSS 重现视错觉。
Adam Argyle
在这篇博文中，我们将玩点有趣的东西！实现这种视觉错觉的方法肯定有 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: 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 上构建的所有方式。
制作演示视频，通过 Twitter 向我发送链接，我会将其添加到下方的社区混音部分！