Bolehkah Segitiga CSS3 dengan Imej Latar Belakang Mengendalikan Kawasan Lutsinar Boleh Diklik?

Mencipta Bentuk Segitiga dengan Imej Latar Belakang

Soalan:

Merancang tapak web dengan dua segi tiga elemen yang mengandungi imej latar belakang dan berfungsi sebagai pautan boleh klik menjadi mencabar apabila cuba membuat bahagian telus segitiga boleh diakses oleh klik. Bolehkah reka bentuk ini dicapai menggunakan segi tiga CSS3 dengan imej latar belakang?

Jawapan:

Menggunakan Imej Kanak-kanak:

Untuk memudahkan proses dan mengekalkan keserasian dengan kebanyakan penyemak imbas, penyelesaiannya ialah menggunakan imej kanak-kanak untuk pautan dan bukannya imej latar belakang. Kaedah ini melibatkan mencipta bentuk segi tiga menggunakan sifat pencong transformasi dan mengimbangi imej kanak-kanak untuk mengimbangi pencongan.

Langkah:

• Buat div bekas dengan dimensi yang sesuai (cth., 900px lebar, 600px ketinggian).
• Tambahkan dua div kanak-kanak untuk segi tiga dan letakkannya secara mutlak dengan asal usul transformasi pada sudut bertentangan.
• Lengok setiap segi tiga mengikut sudut tertentu yang dikira berdasarkan ketinggian dan lebar segi tiga (dalam contoh ini, -55.98deg).
• Buat imej kanak-kanak dalam setiap segi tiga dan putarkannya mengikut sudut yang sama dengan div induk.
• Tetapkan sifat limpahan kepada tersembunyi untuk kedua-dua bekas dan div segi tiga.

HTML:

<div>
<p> <strong>CSS:</strong></p>
<pre class="brush:php;toolbar:false">.container {
  overflow: hidden;
  width: 900px;
  height: 600px;
}

.triangle, .triangle img {
  width: 100%;
  height: 100%;
}

.triangle {
  overflow: hidden;
  position: absolute;
  transform: skewX(-55.98deg);
}

.triangle:first-child {
  left: -.25em;
  transform-origin: 100% 0;
}

.triangle:last-child {
  right: -.25em;
  transform-origin: 0 100%;
}

.triangle img {
  transform: skewX(55.98deg);
  transform-origin: inherit;
}