如何使用 CSS 創建帶有對角線的對稱圖像排列？

有對角線的對稱分隔影像

簡介

建立由對角線分隔的對稱影像排列是一種反覆出現的設計模式經常出現在網頁和圖形設計中。本教學探討如何使用 CSS 來實現此效果，解決先前的方法所面臨的問題，即圖像保留在容器外部且分佈不均勻。

簡化的 CSS 解決方案

消除使用定位元素並簡化程式碼，可以採用Flexbox和background-position的組合。這是改良後的CSS：

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

HTML 結構

用於顯示影像的HTML 結構也簡化了：

<div class="container">
  <div class="box">
<p> <strong>解釋</strong></p>
<p>這個簡化的方法利用Flexbox 將盒子均勻分佈在容器內。每個方塊都使用 --i CSS 變數指定一個背景圖像集。盒子上的傾斜變換創造了對角線效果。 </p>
<p><strong>好處</strong></p>
<p>改良的CSS 和HTML 結構提供了幾個好處：</p>
<ul>
<li>簡化程式碼</li>
<li>
<li>簡化程式碼</li>
<li>使用簡單的影像定位背景位置</li>
</ul>容器內均勻的影像分佈由於減少了DOM 元素和定位而提高了性能</div>
</div>

以上是如何使用 CSS 創建帶有對角線的對稱圖像排列？的詳細內容。更多資訊請關注PHP中文網其他相關文章！