Bagaimana untuk Mencipta Bentuk Segitiga dengan Imej Latar Belakang Menggunakan CSS3?

Bentuk Segi Tiga dengan Imej Latar Belakang: Pendekatan CSS3

Matlamat anda untuk mencipta dua segi tiga dengan imej latar belakang yang berfungsi sebagai pautan boleh dicapai dengan CSS3 segi tiga. Walaupun anda pada mulanya menganggap bentuk tersuai memerlukan sempadan dengan warna sempadan, pendekatan berbeza boleh dilakukan.

Penyelesaian dengan Imej Kanak-kanak

Daripada bergantung pada imej latar belakang, pertimbangkan untuk menggunakan kanak-kanak imej untuk segi tiga. Teknik ini melibatkan pencongan elemen .option dengan asal-usul transformasi yang berbeza. Untuk mengelakkan sebarang kecondongan yang kelihatan dalam hasil akhir, cabut imej kanak-kanak dan gunakan limpahan: tersembunyi pada kedua-dua elemen .pageOption dan .option. Pendekatan ini menawarkan keserasian penyemak imbas yang luas, kecuali untuk IE8/7 dan Opera Mini.

Struktur HTML

<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 Berkaitan

.pageOption {
  overflow: hidden;
  position: relative;
  width: 40em;
  height: 27em;
}
.option, .option img {
  width: 100%;
  height: 100%;
}
.option {
  overflow: hidden;
  position: absolute;
  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;
}

Konfigurasi CSS ini secara berkesan memesongkan segi tiga sambil melonggarkan imej anak mereka, mengakibatkan bentuk segi tiga yang diingini dengan kebolehlayang pada kawasan lutsinar. Kedudukan segi tiga dan asal ubah boleh dilaraskan untuk mencapai saiz dan orientasi segi tiga yang berbeza.

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