Bagaimana untuk Mencipta Segitiga Berlegar dengan Imej Latar Belakang dalam CSS3?

Mencipta Segitiga CSS3 dengan Imej Latar Belakang untuk Pautan Lancar Berbentuk Segi Tiga

Pengenalan

Meningkatkan estetika tapak web anda dengan segi tiga interaktif pautan berbentuk boleh meningkatkan daya tarikan visualnya. Dengan CSS3, anda boleh mencipta bentuk geometri ini dengan mudah dan menggabungkan imej latar belakang untuk menambah kedalaman dan daya tarikan.

Cabaran Zon Lereng Telus

Walau bagaimanapun, isu biasa timbul apabila mencipta segi tiga: ketidakupayaan untuk menuding pada bahagian lutsinar imej latar belakang. Halangan ini menghalang pelawat daripada mengakses pautan asas.

Penyelesaian: Memanfaatkan Imej Kanak-kanak

Untuk mengatasi cabaran ini, pertimbangkan untuk menggunakan imej kanak-kanak untuk pautan anda dan bukannya imej latar belakang . Dengan melaksanakan pendekatan ini, anda boleh memesongkan elemen segitiga induk secara bebas sambil mengekalkan penjajaran pautan imej anak mereka.

Pelaksanaan Kod

Berikut ialah kod yang menunjukkan cara untuk laksanakan teknik ini:

HTML:

<div>

CSS yang berkaitan:

.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;
}

Kesimpulan

Dengan menggunakan imej kanak-kanak untuk pautan anda dan menjajarkannya dengan mahir dengan elemen segi tiga senget, anda boleh mencapai kebolehlayang yang lancar pada keseluruhan bentuk segi tiga. Teknik ini meningkatkan interaktiviti dan daya tarikan visual tapak web anda, memberikan pengalaman pengguna yang lebih menarik.

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