Bagaimanakah Saya Boleh Mencipta Kesan Transformasi Skew CSS3 Sebelah dengan Kawasan Lutsinar?

Transformasi Skew CSS3 pada Satu Sisi

Memahami cara mencipta kesan "CSS3 Transform Skew One Side" boleh berguna untuk pelbagai projek reka bentuk web. Walau bagaimanapun, adalah penting untuk ambil perhatian bahawa hanya menggunakan perubahan condong mungkin tidak menghasilkan hasil yang diingini apabila menggunakan imej untuk latar belakang.

Mengatasi Masalah

Dalam khusus anda kes, anda memerlukan transformasi CSS3 untuk menyerong hanya satu sisi imej sambil mengekalkan kawasan senget yang telus. Penyelesaian yang disediakan menggunakan sempadan pepejal tidak akan mencapai kesan ini dengan berkesan.

Penyelesaian: Nested Div with Opposite Skew

Untuk mencapai kesan yang diingini, pertimbangkan untuk menggunakan nested div untuk imej dan menggunakan nilai condong yang bertentangan dengan nilai div induk. Sebagai contoh, jika anda telah menggunakan pencongan 20 darjah pada bekas induk, berikan div (imej) bersarang nilai pencongan sebanyak -20 darjah.

Kod Contoh:

Untuk menunjukkan, berikut ialah contoh menggunakan bekas dan bersarang divs:

.container {
  overflow: hidden;
}

#parallelogram {
  width: 150px;
  height: 100px;
  margin: 0 0 0 -20px;
  transform: skew(20deg);
  background: red;
  overflow: hidden;
  position: relative;
}

.image {
  background: url(http://placekitten.com/301/301);
  position: absolute;
  top: -30px;
  left: -30px;
  right: -30px;
  bottom: -30px;
  transform: skew(-20deg);
}

Kod ini akan membuat condong 20 darjah pada bekas selari merah. Di dalamnya, imej akan diletakkan dalam div bersarang dengan condong -20 darjah, dengan berkesan membalikkan condong yang digunakan pada bekas induk dan mendedahkan kawasan senget lutsinar di belakangnya.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencipta Kesan Transformasi Skew CSS3 Sebelah dengan Kawasan Lutsinar?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!