營造彎曲的幻覺效果

以有趣的方式探索如何使用 CSS 重現視錯覺。

Adam Argyle

這篇文章會介紹一些有趣的功能！達成這種錯覺效果的方法有 100 種，我只會分享我的想法，但鼓勵你嘗試自己的風格。試用示範，並查看來源。

如果比較喜歡看影片，可以觀看這篇貼文的 YouTube 版本：

總覽

這個錯覺稱為「咖啡廳牆壁錯覺」。到處都找不到歪斜的線條，但我們的眼睛會感覺傾斜。這可能難以置信，但重建絕對有助於你看穿錯覺。

標記

這項功能的 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？漸層？！

讓我們多元化地運用各種方法，學習在網路上建構內容。

建立試聽版，然後在推特上傳送連結給我，我會將連結加到下方的社群混音區！

社群重混作品