創建由對角線分隔的5 個對稱圖像的橫幅

模擬對稱圖像橫幅

在一個迷人的視覺內容時代，創造視覺內容吸引人的設計已成為當務之急。這種對美學卓越的追求導致用戶在 Reddit 上偶然發現了一個引人注目的橫幅，其中有五個對稱排列的圖像，由對角線分隔。受此設計的啟發，使用者開始了模仿類似內容的旅程，合併了他們選擇的五張圖像並添加了文字疊加層。在使用 CSS 和貓圖像進行一些實驗後，使用者遇到了圖像放置和分佈的挑戰。

簡化的解決方案

使用者沒有依賴定位元素，而是採用了使用 Flexbox 的更直接的方法。透過建立一個包含五個 Flexbox 專案的容器並對每個框套用傾斜變換，無需複雜的定位即可實現所需的效果。

以下程式碼片段示範如何建立這種對稱圖像排列：

.container {
  display: flex;
  height: 150px;
  margin: 0 30px;
}

.box {
  flex: 1;
  border: 1px solid;
  transform: skew(-25deg);
  position: relative;
  overflow: hidden;
}

.box:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -50%;
  right: -50%;
  transform: skew(25deg);
  background-image: var(--i);
  background-position: center;
}