Bagaimanakah Saya Boleh Membenamkan Imej Dalam Bentuk Heksagon Menggunakan HTML dan CSS?

Memasukkan Imej ke dalam Bentuk Heksagon dalam HTML/CSS

Soalan:

Adakah ia boleh dilaksanakan untuk memasukkan imej dalam bentuk heksagon? Sel heksagon dalam HTML sudah biasa, tetapi mengisinya dengan imej latar belakang terbukti mencabar.

Usaha Dicuba:

Berikut ialah beberapa pendekatan yang telah cuba:

.top {
  height: 0;
  width: 0;
  display: block;
  border: 20px solid red;
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: red;
  border-left-color: transparent;
}
.middle {
  height: 20px;
  background: red;
  width: 40px;
  display: block;
}
.bottom {
  height: 0;
  width: 0;
  display: block;
  border: 20px solid red;
  border-top-color: red;
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-left-color: transparent;
}

<div class="hexagon pic">
  <span class="top"><p><strong>Jawapan:</strong></p>
<p>Dengan kemunculan CSS3, kemungkinannya tidak terhad, seperti yang ditunjukkan dalam contoh berikut:</p>
<pre class="brush:php;toolbar:false">.hexagon {
  width: 200px;
  height: 200px;
  border: 1px solid black;
  position: relative;
  -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

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

<div class="hexagon">
  <img src="/static/imghwm/default1.png" data-src="image.jpg" class="lazy" alt="Image">
</div>

Dalam penyelesaian ini, laluan keratan CSS3 digunakan untuk mentakrifkan heksagon bentuk, membolehkan imej dipaparkan dengan lancar di dalamnya. Pendekatan ini disokong oleh penyemak imbas moden dan menyediakan keserasian merentas pelayar yang sangat baik, memastikan pengalaman pengguna yang konsisten.