Flexbox を使用して対称的な画像バナーを作成するには?

対角線で区切られた 5 つの対称画像を含むバナーの作成

対称画像バナーのエミュレーション

魅力的なビジュアル コンテンツの時代において、視覚的に作成魅力的なデザインが不可欠になっています。この美的卓越性の探求により、ユーザーは Reddit で、対角線で区切られた 5 つの対称的に配置された画像を特徴とする印象的なバナーに遭遇しました。このデザインに触発されて、ユーザーは同様のものをエミュレートする旅に乗り出し、選択した 5 つの画像を組み込み、テキスト オーバーレイを追加しました。 CSS と猫の画像を使用していくつかの実験を行った後、ユーザーは画像の配置と配布に関する課題に直面しました。

簡素化された解決策

ユーザーは、要素の配置に依存する代わりに、Flexbox を使用するより直接的なアプローチを採用しました。 。 5 つの 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;
}

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

以上がFlexbox を使用して対称的な画像バナーを作成するには?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。