如何使用 CSS 重新建立具有五個圖像的對稱橫幅？

用五個影像模擬對稱分割的橫幅

Reddit 上的流行主題描繪了一個由對角線分隔的五個對稱影像組成的橫幅，這一主題激發了人們的靈感使用CSS 模擬類似的設計。目標是創建一個橫幅，其中圖像均勻分佈並限制在框中。

CSS 實作

修訂後的 CSS 應用了以下修改：

• 利用 Flexbox 進行佈局，確保均勻分佈。
• 將框傾斜一定角度並使用偽元素建立對角線。
• 背景影像使用以下方式指派CSS 變量，方便自訂。
• 定義具有特定高度和間距邊距的容器。

HTML 結構

HTML 結構由一個具有五個框元素的容器組成，每個元素透過 --i CSS 變數分配一個背景圖片。

這裡是 CSS 和 HTML 程式碼：

.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;
}

<div class="container">
  <div class="box">

透過實現這些調整後，CSS 現在用對角線分隔的圖片模擬所需的對稱橫幅。

以上是如何使用 CSS 重新建立具有五個圖像的對稱橫幅？的詳細內容。更多資訊請關注PHP中文網其他相關文章！