Bagaimana untuk Memusingkan Hanya Hujung Galeri Imej Menggunakan CSS?

Membuang Hujung Pelbagai Imej Serong

Sebelum ini, kaedah untuk menyerong pelbagai imej telah dicipta, menghasilkan hasil yang memuaskan . Walau bagaimanapun, masih terdapat cabaran: bagaimana untuk mencondongkan hanya hujung kiri (kotak1) dan hujung kanan (kotak6) bekas sambil membiarkan bahagian dalam tidak condong.

Penyelesaian

Untuk menangani isu ini, penyelesaian CSS yang diperhalusi telah dibuat dibangunkan:

 --s: 50px; /<em> kawal bahagian senget </em>/<p>paparan: grid;<br> ketinggian: 350px;<br> jurang: 8px;<br> grid-auto-flow: lajur;<br> item tempat: pusat;<br>}<br>.galeri > img {<br> lebar: 0;<br> lebar min: calc(100% var(--s));<br> tinggi: 0;<br> ketinggian min: 100%;<br> objek- muat: penutup;<br> laluan klip: poligon(var(--s) 0,100% 0,calc(100% - var(--s)) 100%,0 100%);<br> kursor: penunjuk;<br> peralihan: .5s;<br>}<br>.galeri > img:legar {<br> lebar: 15vw; <br>}<br>.galeri > img:anak pertama {<br> lebar min: calc(100% var(--s)/2);<br> tempat-diri: mula;<br> laluan klip: poligon(0 0,100% 0, calc(100% - var(--s)) 100%,0 100%);<br>}<br>.galeri > img:anak terakhir {<br> lebar min: calc(100% var(--s)/2);<br> place-self: end;<br> clip-path: polygon(var(--s ) 0,100% 0,100% 100%,0 100%);<br>}</p><p>badan {<br> jidar: 0;<br> ketinggian min: 100vh;<br> paparan: grid;<br> jajar-kandungan: tengah;<br> latar belakang: #ECD078;<br>}</p>

Kod ini mentakrifkan grid CSS dengan enam imej. Grid dikonfigurasikan dengan jurang antara imej dan sifat item tempat yang memusatkannya dalam sel grid. Setiap imej diberi lebar 0, lebar minimum 100% ditambah dengan nilai pembolehubah --s, ketinggian 0 dan ketinggian minimum 100%. Sifat muat objek ditetapkan untuk menutup, memastikan imej memenuhi ruang yang tersedia sambil mengekalkan nisbah bidangnya.

Sifat laluan klip digunakan untuk mencipta bentuk senget. Untuk setiap imej, poligon menentukan empat titik yang menentukan empat sisi bentuk. Nilai --s mengawal lebar bahagian senget pada permulaan dan penghujung bekas, membolehkan anda memperhalusi penampilannya.

Peraturan gaya :hover digunakan pada imej pada tuding, meningkat lebar mereka untuk menjadikannya lebih menonjol. Gaya :anak pertama dan :anak terakhir melaraskan laluan klip imej pertama dan terakhir untuk menghasilkan kesan senget yang diingini pada tepi bekas.

Penyelesaian ini menawarkan beberapa kelebihan: ia membolehkan reka bentuk responsif, mengekalkan nisbah bidang imej dan menyediakan kawalan ke atas rupa bentuk yang condong.

Atas ialah kandungan terperinci Bagaimana untuk Memusingkan Hanya Hujung Galeri Imej Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!