Bagaimana untuk Mencipta Susunan Imej Simetri dengan Garis Pepenjuru Menggunakan CSS?

Imej Dipisahkan Secara Simetri dengan Garis Pepenjuru

Pengenalan

Mencipta susunan imej simetri yang dipisahkan oleh garisan pepenjuru ialah corak reka bentuk berulang sering dijumpai dalam reka bentuk web dan grafik. Tutorial ini meneroka cara untuk mencapai kesan ini menggunakan CSS, menangani isu yang dihadapi dengan pendekatan terdahulu yang mana imej kekal di luar bekas dan diedarkan secara tidak sekata.

Penyelesaian CSS Ringkas

Untuk menghapuskan penggunaan elemen kedudukan dan memudahkan kod, gabungan Flexbox dan kedudukan latar belakang boleh digunakan. Berikut ialah CSS yang dipertingkatkan:

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

Struktur HTML

Struktur HTML untuk memaparkan imej telah dipermudahkan juga:

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

Penjelasan

Pendekatan ringkas ini menggunakan Flexbox untuk mengagihkan kotak secara sama rata dalam bekas. Setiap kotak diberikan set imej latar belakang menggunakan pembolehubah --i CSS. Transformasi condong pada kotak menghasilkan kesan pepenjuru.

Faedah

Struktur CSS dan HTML yang dipertingkat menawarkan beberapa faedah:

• Dipermudahkan kod
• Kedudukan imej yang mudah menggunakan kedudukan latar belakang
• Pengedaran imej yang sekata dalam bekas
• Prestasi yang lebih baik disebabkan oleh pengurangan elemen DOM dan kedudukan

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