Beispielcode zur Implementierung sechseckiger Rahmen mit CSS3

Die äußerste BoxF dreht sich um 120 Grad, die zweite BoxS dreht sich um -60 Grad und die dritte BoxT dreht sich wieder um -60 Grad. Jetzt sind sie einfach wieder an der ursprünglichen Position und dann wird das Bild auf den Div-Hintergrund der dritten Ebene gelegt. Da in den ersten beiden Div-Ebenen nichts vorhanden ist, werden sie nur zum Drehen verwendet, um das Sechseck zu erhalten. Daher ist für die 1. und 2. Div-Ebene die Sichtbarkeit: ausgeblendet festgelegt. Die 3. Div-Ebene ist für Bilder und muss angezeigt werden. Daher ist die Sichtbarkeit: sichtbar festgelegt.

Nach der Drehung bleiben auf jeden Fall überzählige Teile übrig. Legen Sie daher für alle drei Divs „overflow:hidden“ fest. Nach dem Drehen und Ausblenden der überzähligen Teile erhalten wir das gewünschte Sechseck.

Beachten:

1. Wenn Sie für das Div der dritten Ebene „Sichtbarkeit: sichtbar“ nicht festlegen, wird standardmäßig die Sichtbarkeit: verborgen des Divs der zweiten Ebene (Boxen) übernommen.
2. Das Breite-Höhe-Verhältnis des Div muss 4:5 betragen, sonst ist es kein Sechseck.

Umsetzungsprinzip:

•Transformieren: Drehen (120 Grad); Bilddrehung
•Überlauf:versteckt; Überlauf versteckt
•visibility: hidden; ist ebenfalls versteckt, ähnlich wie display:none;, aber der Unterschied besteht darin, dass es, obwohl es versteckt ist, immer noch eine Position auf der Webseite einnimmt

Implementierungscode:

HTML Code

<div Klasse="boxF">
    <div Klasse="boxS">
        <div Klasse="boxT" Stil="Hintergrundbild: url(tupian.jpg);"></div>
    </div>
</div>

CSS Code

.boxF, 
.boxS, 
.boxT, 
.overlay {
 Breite: 200px;
 Höhe: 250px;
 Überlauf: versteckt;
}
.boxF, 
.boxS {
 Sichtbarkeit: versteckt;
}
.boxF {
 transformieren: drehen (120 Grad);
 schweben: links;
 Rand links: 10px;
 -ms-transform:drehen(120Grad);
 -moz-transform:drehen(120 Grad);
 -webkit-transform: drehen(120 Grad);
}
.boxS {
 transformieren: drehen (-60 Grad);
 -ms-transform:drehen(-60Grad);
 -moz-transform:drehen(-60Grad);
 -webkit-transform: drehen(-60 Grad);
}
.boxT {
 transformieren: drehen (-60 Grad);
 Hintergrund: keine Wiederholung 50 % Mitte;
 Hintergrundgröße: 125 % automatisch;
 -ms-transform:drehen(-60Grad);
 -moz-transform:drehen(-60Grad);
 -webkit-transform: drehen(-60 Grad);
 Sichtbarkeit: sichtbar;
}

Zusammenfassen

Oben sehen Sie den vom Herausgeber eingeführten Beispielcode zur Implementierung eines sechseckigen Rahmens in CSS3. Ich hoffe, er ist hilfreich für Sie. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und ich werde Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken!