Bagaimana untuk Mencipta Imej Berpusat Sempurna dalam Kotak Serong Menggunakan CSS?

Mencipta Imej Simetri dengan Garisan Pepenjuru

Dalam bidang reka bentuk web, mencipta visual yang menawan dan menarik secara visual adalah yang terpenting. Satu teknik yang semakin popular ialah susunan simetri imej yang dipisahkan oleh garis pepenjuru, serupa dengan sepanduk menarik yang anda temui di Reddit.

Untuk mencapai kesan ini, anda memulakan pengembaraan pengekodan menggunakan CSS, tetapi menemui beberapa cabaran. Imej anda tidak diedarkan sama rata dalam kotak malah ada yang tumpah. Mari kita mendalami penyelesaian alternatif yang menangani isu ini.

Daripada bergantung pada elemen kedudukan, kami akan memanfaatkan kuasa kedudukan latar belakang untuk memusatkan imej kami dengan mudah. Coretan kod di bawah menyediakan pendekatan yang mudah tetapi berkesan:

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

Apabila digunakan pada struktur HTML ini:

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

Hasilnya ialah satu set imej yang berpusat dengan sempurna dan jarak sama rata dalam kotak yang condong, mencipta kesan visual yang menawan dan seimbang.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Imej Berpusat Sempurna dalam Kotak Serong Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!