Bagaimana untuk Mencipta Bentuk Segitiga CSS3 dengan Imej Latar Belakang dan Memastikan Kebolehklikan?

Bentuk Segi Tiga dengan Imej Latar Belakang

Dalam projek, anda memerlukan dua segi tiga untuk berfungsi sebagai pautan dan memegang imej latar belakang. Isunya terletak pada ketidakupayaan untuk menuding pada bahagian lutsinar satu segi tiga untuk mengakses pautan di belakangnya. Begini cara untuk mencapai reka bentuk ini dengan segi tiga CSS3 dan imej latar belakang:

Segi tiga CSS3 tidak boleh dibuat dengan jidar sahaja, yang hanya membenarkan bentuk segi empat tepat. Sebaliknya, anda boleh menggunakan imej kanak-kanak untuk pautan dan bukannya imej latar belakang. Berikut ialah kod yang dipertingkatkan:

<div class="pageOption">
  <a href="#" class="option" data-inf="photo">
    <img src="../images/menuPhoto.png">
  </a>
  <a href="#" class="option" data-inf="cinema">
    <img src="../images/menuCinema.png">
  </a>
</div>

CSS yang bertanggungjawab untuk bentuk segi tiga:

.pageOption {
  overflow: hidden;
  position: relative;
  width: 40em; height: 27em;
}
.option, .option img { width: 100%; height: 100%; }
.option {
  overflow: hidden;
  position: absolute;  
  /* arctan(27 / 40) = 34.01935deg 
   * need to skew by 90deg - 34.01935deg = 55.98065deg
  */
  transform: skewX(-55.98deg);
}
.option:first-child {
  left: -.25em;
  transform-origin: 100% 0;
}
.option:last-child {
  right: -.25em;
  transform-origin: 0 100%;
}
.option img {
  transform: skewX(55.98deg);
  transform-origin: inherit;
}

Penyelesaian ini menggunakan sifat perubahan condong untuk mencipta segi tiga CSS3. Imej-imej di dalam pilihan kemudiannya tidak condong untuk mengimbangi bekas yang condong. Dengan menetapkan limpahan kepada tersembunyi pada kedua-dua bekas dan pilihan, imej kekal dalam sempadan kawasan masing-masing.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Bentuk Segitiga CSS3 dengan Imej Latar Belakang dan Memastikan Kebolehklikan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!