Bolehkah saya Memaparkan Imej Di Dalam Heksagon Menggunakan HTML dan CSS?

Heksagon dengan Imej Di Dalam

Soalan

Adakah mungkin untuk memaparkan imej dalam bentuk heksagon dalam HTML/CSS?

Cadangan Penyelesaian

Satu pendekatan untuk mencapai ini adalah dengan melaksanakan topeng kliping menggunakan CSS3 transformasi.

Pelaksanaan

Pertama, tentukan bentuk heksagon menggunakan kelas CSS berikut:

.hexagon {
  --base: 20px;
  --height: calc(var(--base) * sqrt(3) / 2);

  position: relative;
  width: var(--base) * 2;
  height: var(--height) * 2;
}

Kemudian, gunakan limpahan tersembunyi dan transformasi CSS untuk mencipta topeng heksagon dan letakkan imej di dalamnya:

.hexagon > img {
  width: 100%;
  height: 100%;
  object-fit: cover;

  clip-path: polygon(
    0 0,
    calc(100% - var(--base)) 0,
    100% calc(var(--height) * 0.5),
    100% calc(var(--height) * 1.5),
    calc(100% - var(--base)) 100%,
    0 100%
  );
}

Berikut ialah contoh kod:

<div class="hexagon">
  <img src="image.jpg" alt="Image inside hexagon" />
</div>

Pertimbangan

Penyelesaian ini menawarkan keserasian merentas pelayar dan kawasan bertopeng boleh klik. Dengan memanfaatkan transformasi CSS3, ia membolehkan cara yang fleksibel untuk berfungsi dengan bentuk bukan segi empat tepat.

Atas ialah kandungan terperinci Bolehkah saya Memaparkan Imej Di Dalam Heksagon Menggunakan HTML dan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!