Wie erstelle ich mit CSS ein Sechseck mit einem Hintergrundbild?

Sechseck mit Hintergrundbild

Das Erstellen einer Sechseckform in HTML mit CSS ist relativ einfach. Das Hinzufügen eines Bildes innerhalb dieses Sechsecks kann jedoch etwas schwieriger sein.

Um diesen Effekt zu erzielen, kann man die Leistungsfähigkeit von CSS3 nutzen, indem man Transformationen und Überlaufeigenschaften verwendet. Durch die Verwendung verschiedener Rotationswerte, wobei der Überlauf auf „Ausgeblendet“ eingestellt ist, ist es möglich, eine browserübergreifende Maske zu erstellen, die das Hinzufügen eines Bildes innerhalb der sechseckigen Form ermöglicht.

Hier ist ein Beispiel, das zeigt, wie man ein Bild erstellt Sechseck mit einem Hintergrundbild:

.hexagon-bg {
    width: 100px;
    height: 86.61px;
    margin: auto;
    border-bottom: 20px solid red;
    position: relative;
    overflow: hidden;
}

.hexagon-bg:before {
    content: "";
    width: 100%;
    height: 100%;
    background-image: url(background-image.png);
    transform: rotate(30deg);
    position: absolute;
}

<div class="hexagon-bg">
</div>

Diese Technik erstellt eine browserübergreifende Maske, die es ermöglicht, das angegebene Hintergrundbild innerhalb der Sechseckform anzuzeigen. Es ist wichtig zu beachten, dass ältere Browser diese Funktionalität möglicherweise nicht unterstützen, moderne Browser wie Chrome, Firefox und Safari jedoch den Effekt wie beabsichtigt darstellen.

Das obige ist der detaillierte Inhalt vonWie erstelle ich mit CSS ein Sechseck mit einem Hintergrundbild?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!