Wie kann ich Bilder mithilfe von HTML und CSS in sechseckige Formen einbetten?

Bilder in sechseckige Formen in HTML/CSS einfügen

Frage:

Ist es machbar? ein Bild in eine sechseckige Form einfügen? Sechseckige Zellen in HTML sind bekannt, aber das Füllen mit einem Hintergrundbild hat sich als Herausforderung erwiesen.

Versuche:

Hier sind einige Ansätze, die versucht wurden:

.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>Antwort:</strong></p>
<p>Mit dem Advent Mit CSS3 sind die Möglichkeiten grenzenlos, wie das folgende Beispiel zeigt:</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>

In dieser Lösung werden CSS3-Beschneidungspfade verwendet, um die sechseckige Form zu definieren, sodass Bilder nahtlos darin angezeigt werden können . Dieser Ansatz wird von modernen Browsern unterstützt und bietet eine hervorragende browserübergreifende Kompatibilität, wodurch ein konsistentes Benutzererlebnis gewährleistet wird.