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

Antwort:

Mit dem Advent Mit CSS3 sind die Möglichkeiten grenzenlos, wie das folgende Beispiel zeigt:

.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="image.jpg" 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.

Das obige ist der detaillierte Inhalt vonWie kann ich Bilder mithilfe von HTML und CSS in sechseckige Formen einbetten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!