CSS を使用して 5 つの画像を含む対称バナーを再作成するにはどうすればよいですか?

5 つの画像を含む対称的に分割されたバナーをエミュレートする

対角線で区切られた 5 つの対称画像を含むバナーを描いた Reddit の人気テーマは、インスピレーションを与えました。 CSS を使用した同様のデザインのエミュレーション。目標は、画像が均等に分散され、ボックス内に収まるバナーを作成することです。

CSS の実装

改訂された CSS では、次の変更が適用されます。

• レイアウトにフレックスボックスを使用し、均等な分散を保証します。画像。
• ボックスを斜めに傾け、擬似要素を使用して対角線を作成します。
• 背景画像は、簡単にカスタマイズできるように CSS 変数を使用して割り当てられます。
• 定義特定の高さとマージンを持つコンテナspacing.

HTML 構造

HTML 構造は 5 つのボックス要素を含むコンテナで構成され、各ボックス要素には --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 を使用して 5 つの画像を含む対称バナーを再作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。