營造彎曲的幻覺效果

探索如何使用 CSS 重現視錯覺。

Adam Argyle

在這篇文章中，我們將帶來一點樂趣！要創造這種視錯覺，一定有 100 種方法，我只會分享自己的想法，但鼓勵你嘗試自己的風格。試試看功能示範並查看原始碼。

如果你偏好觀看影片，請參閱這篇文章的 YouTube 版本：

總覽

這項錯覺的名稱是「Cafe Wall Illusion」。畫面上沒有任何歪斜的線條，但我們的眼睛會感覺到斜線。這可能很難相信，但重建這個項目絕對有助於您看穿錯覺。

標記

這段 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？漸層？！

讓我們來體驗更多元的方法，並瞭解在網路上建立內容的所有方式。

請製作示範作品，並在推特上傳連結，我會將其加入下方的社群重混曲目錄！

社群重混作品