Kann ich mit HTML und CSS ein Bild innerhalb eines Sechsecks anzeigen?

Sechseck mit Bild darin

Frage

Ist es möglich, ein Bild innerhalb einer Sechseckform in HTML/CSS anzuzeigen?

Vorgeschlagene Lösung

Ein Ansatz, dies zu erreichen, ist die Implementierung einer Schnittmaske mithilfe von CSS3-Transformationen.

Implementierung

Definieren Sie zunächst die Form des Sechsecks mithilfe der folgenden CSS-Klasse:

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

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

Verwenden Sie dann den versteckten Überlauf und CSS-Transformationen, um die Sechseckmaske zu erstellen und das Bild darin zu platzieren:

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

Hier ist ein Beispielcode:

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

Überlegungen

Diese Lösung bietet sowohl browserübergreifende Kompatibilität als auch anklickbare maskierte Bereiche. Durch die Nutzung von CSS3-Transformationen ermöglicht es eine flexible Arbeit mit nicht rechteckigen Formen.

Das obige ist der detaillierte Inhalt vonKann ich mit HTML und CSS ein Bild innerhalb eines Sechsecks anzeigen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!