營造彎曲的幻覺效果

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

這篇文章將帶給你一點樂趣!要創造這種視錯覺,一定有 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: 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?漸層?!

讓我們多方嘗試,瞭解在網路上建構應用程式的所有方式。

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

社群重混作品