Bagaimana untuk Mencipta Sepanduk Imej Simetri Menggunakan Flexbox?

Mencipta Sepanduk dengan 5 Imej Simetri Dipisahkan Oleh Garis Pepenjuru

Meniru Sepanduk Imej Simetri

Dalam era kandungan visual yang menawan, mencipta secara visual reka bentuk yang menarik telah menjadi penting. Pencarian untuk kecemerlangan estetik ini menyebabkan pengguna terjumpa sepanduk yang menarik di Reddit, menampilkan lima imej tersusun simetri yang dipisahkan oleh garis pepenjuru. Diilhamkan oleh reka bentuk ini, pengguna memulakan perjalanan untuk meniru sesuatu yang serupa, menggabungkan lima imej pilihan mereka dan menambah tindanan teks. Selepas beberapa percubaan menggunakan CSS dan imej kucing, pengguna menghadapi cabaran dengan peletakan dan pengedaran imej.

Penyelesaian Ringkas

Daripada bergantung pada elemen penentududukan, pengguna menggunakan pendekatan yang lebih mudah menggunakan Flexbox . Dengan mencipta bekas dengan lima item Flexbox dan menggunakan transformasi condong pada setiap kotak, kesan yang diingini telah dicapai tanpa memerlukan kedudukan yang kompleks.

Coretan berikut menunjukkan cara mencipta susunan imej simetri ini:

.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">

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Sepanduk Imej Simetri Menggunakan Flexbox?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!