Bagaimana untuk Mencipta Sepanduk Simetri dengan Lima Imej menggunakan CSS?

Mencontohi Sepanduk Terbahagi Simetri dengan Lima Imej

Tema popular di Reddit yang menggambarkan sepanduk dengan lima imej simetri yang dipisahkan oleh garis pepenjuru telah memberi inspirasi emulasi reka bentuk yang serupa menggunakan CSS. Matlamatnya adalah untuk mencipta sepanduk di mana imej diedarkan secara sama rata dan dihadkan dalam kotak.

Pelaksanaan CSS

CSS yang disemak menggunakan pengubahsuaian berikut:

• Menggunakan flexbox untuk reka letak, memastikan pengedaran imej yang sama.
• Memusingkan kotak pada sudut dan menggunakan elemen pseudo untuk mencipta garis pepenjuru.
• Imej latar belakang ditetapkan menggunakan Pembolehubah CSS untuk penyesuaian mudah.
• Mentakrifkan bekas dengan ketinggian dan margin khusus untuk jarak.

Struktur HTML

Struktur HTML terdiri daripada bekas dengan lima elemen kotak, setiap satu memberikan imej latar belakang melalui pembolehubah --i CSS.

Berikut ialah kod CSS dan 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">

Dengan melaksanakan ini pelarasan, CSS kini meniru sepanduk simetri yang diingini dengan imej yang diasingkan secara menyerong.

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