Bagaimanakah Saya Boleh Memusingkan Hanya Satu Sisi Imej Menggunakan Transformasi CSS3?

Memusing Sebelah dengan Transformasi CSS3

Memusing imej dalam CSS3 ialah tugas yang mudah, tetapi memiringkan hanya satu sisi boleh menjadi lebih mencabar.

Penyelesaian yang disediakan menggunakan sifat sempadan tidak sesuai apabila anda mempunyai latar belakang imej dan bukannya warna pepejal. Selain itu, pencongan kedua-dua belah elemen dan bukannya satu sahaja boleh mengehadkan.

Untuk mencapai pencongan sebelah, pertimbangkan pendekatan ini:

Nyahskeping Imej

Gunakan elemen div bersarang untuk memegang imej. Gunakan nilai pencongan yang bertentangan pada div bersarang untuk mengatasi pencongan yang digunakan pada induk.

Kod Contoh:

<div class="container">
  <div>
<pre class="brush:php;toolbar:false">.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(image.jpg); /* Replace with your image URL */
  position: absolute;
  top: -30px;
  left: -30px;
  right: -30px;
  bottom: -30px;
  transform: skew(-20deg);
}

Persediaan ini hanya menyerong dengan berkesan sebelah imej, meninggalkan sebelah lagi lurus. Kawasan senget kekal telus disebabkan limpahan: harta tersembunyi pada bekas induk.