Bagaimana untuk Membuat Imej Segi Tiga dengan Imej Latar Belakang Menggunakan CSS?

Membuat Imej Segi Tiga dengan Imej Latar Belakang Menggunakan CSS

Dalam projek ini, kami menyasarkan untuk mencipta dua imej segi tiga dengan imej latar belakang yang bertindak sebagai pautan. Mockup reka bentuk menunjukkan segi tiga ini dalam susunan khusus:

[Imej imej segi tiga dengan imej latar belakang]

Pada mulanya, kami cuba mencapai ini menggunakan div dan menggunakan imej latar belakang padanya. Walau bagaimanapun, pendekatan ini memberikan cabaran untuk melayang di atas bahagian lutsinar imej untuk mencapai pautan asas.

Segi Tiga CSS3 dengan Imej Latar Belakang: Penyelesaian Berdaya maju

Ya, adalah mungkin untuk dicapai reka bentuk ini menggunakan segi tiga CSS3 dan tetapkan imej latar belakang mereka. Bentuk tersuai sememangnya dicipta menggunakan sempadan dengan warna sempadan yang ditentukan.

Pelaksanaan Kod untuk Segitiga CSS3 dengan Imej Latar Belakang

Berikut ialah kod yang diperlukan untuk melaksanakan imej segi tiga dengan imej latar belakang menggunakan CSS :

.pageOption {
  position: relative;
  width: 900px;
  height: 600px;
}

.pageOption .photo {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 900px;
  height: 600px;
  background: url('../images/menuPhoto.png') no-repeat 0 0;
}

.pageOption .cinema {
  position: absolute;
  bottom: 0px;
  right: 0px;
  width: 900px;
  height: 600px;
  background: url('../images/menuCinema.png') no-repeat 0 0;
}

Pendekatan Alternatif Menggunakan Imej Kanak-kanak dan Skew Transformasi

Pendekatan alternatif ialah menggunakan imej kanak-kanak untuk pautan dan bukannya imej latar belakang. Ini melibatkan memesongkan elemen .option dengan asal usul transformasi yang berbeza, membongkar imej anak mereka dan menetapkan limpahan: tersembunyi pada kedua-dua elemen .pageOption dan .option.

HTML:

<div>

CSS:

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

Ini pendekatan menyediakan penyelesaian yang lebih bersih dengan sokongan yang dipertingkatkan merentas penyemak imbas yang berbeza, tidak termasuk IE8/7 dan Opera Mini.

Atas ialah kandungan terperinci Bagaimana untuk Membuat Imej Segi Tiga dengan Imej Latar Belakang Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!