CSS zum Erstellen eines mit Sechsecken gefüllten Bildhintergrunds

Dieses Mal zeige ich Ihnen CSS, um mit Bildhintergründen gefüllte Sechsecke zu erstellen. Hier ist ein praktischer Fall. einmal. Das Realisierungsprinzip des Sechsecks wird tatsächlich durch Drehen von drei überlappenden Rechtecken erhalten, wie in der folgenden Abbildung dargestellt:

Um ein positives Sechseck zu erhalten, müssen die beiden Rechtecke gedreht werden. Der Winkel muss sein -60 Grad und 60 Grad, und das Seitenverhältnis des Rechtecks ​​muss Math.sqrt(3): 1 sein

Also müssen wir zuerst drei Rechtecke erstellen:

Wir legen die Breite und Höhe fest Die drei Rechtecke sind jeweils 60 Pixel und 104 Pixel groß, die Hintergrundfarbe ist blau, .hexagonitem_left wird um -60 Grad gedreht, .hexagonitem_right wird um 60 Grad gedreht und .hexagonitem_center wird nicht gedreht.

    <p class="hexagon">
        <p class="hexagonitem hexagonitem_left"></p>
        <p class="hexagonitem hexagonitem_center"></p>
        <p class="hexagonitem hexagonitem_right"></p>
    </p>

Auf diese Weise können Sie einfach ein regelmäßiges Sechseck erhalten.

      .hexagon {
            width: 60px;
            height: 104px;
            position: relative;
            margin: 200px auto;
        }
        .hexagonitem {
            width: 100%;
            height: 100%;
            background: blue;
            position: absolute;
            top: 0;
            left: 0;
        }
        .hexagonitem_left {
            transform: rotate(-60deg);
        }
        .hexagonitem_right {
            transform: rotate(60deg);
        }

Wie können wir also den blauen Hintergrund in ein Bild verwandeln? Die oben genannten drei Rechtecke spielen eigentlich nur eine formende Rolle. Eigentlich sollten sie auf

Sichtbarkeit

eingestellt werden. versteckt, müssen wir jedem der drei Rechtecke ein rechteckiges untergeordnetes Element hinzufügen und es auf Sichtbarkeit: sichtbar setzen. Die Breite und Höhe der drei untergeordneten Elemente müssen gerade das vorherige blaue Sechseck abdecken.

Der Code lautet wie folgt, Sie können ihn sorgfältig studieren

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie hier Weitere verwandte Artikel auf der chinesischen PHP-Website!

    
    
    
    
    


    <p class="hexagon">
        <p class="hexagonitem hexagonitem_left"></p>
        <p class="hexagonitem hexagonitem_center"></p>
        <p class="hexagonitem hexagonitem_right"></p>
    </p>

Empfohlene Lektüre:

So verwenden Sie das CSS-Weird-Box-Modell und das Standard-Box-Modell

CSS zur Implementierung des Akkordeon-Layouts

Das obige ist der detaillierte Inhalt vonCSS zum Erstellen eines mit Sechsecken gefüllten Bildhintergrunds. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!