So implementieren Sie Sechsecke in CSS

So implementieren Sie Sechsecke in CSS: 1. Kombinieren Sie 3 Ps, darunter 2 gleichschenklige Dreiecke und ein Rechteck. 2. Erhalten Sie ein regelmäßiges Sechseck, indem Sie 3 Rechtecke in verschiedenen Winkeln drehen.

Die Betriebsumgebung dieses Artikels: Windows7-System, HTML5- und CSS3-Version, Dell G3-Computer.

Wie implementiert man Sechsecke in CSS?

Ich habe kürzlich ein Wabenlayout geschrieben, also habe ich das Implementierungsprinzip von Sechsecken studiert
Zwei Möglichkeiten, Sechsecke zu implementieren:
Methode 1: Ein Rechteck + zwei Dreiecke
Zuerst müssen wir den Rand verstehen

Jeder Rand ist 45 Wir können damit ein Dreieck erstellen

<p class="triangle"></p>/*css片段*/.triangle{
    width: 0;
    height: 0;
    border-bottom: 50px solid red;
    border-left: 86px solid transparent;
    border-right: 86px solid transparent;
}

Der obige Code kann ein gleichschenkliges Dreieck mit einem Scheitelwinkel von 120 Grad erstellen

Die Art und Weise, wie wir ein Sechseck erstellen, ist: Kombinieren Sie 3 ps zusammen, die Ober- und Unterseite sind 120 -Grad-gleichschenklige Dreiecke, und die Mitte ist ein Rechteck (Hinweis: Rand oben/Rand unten bestimmt die Höhe des Dreiecks)
Lassen Sie uns das Sechseck realisieren

<p class="top-triangle"></p>
<p class="center"></p>
<p class="bottom-triangle"></p>
/*css片段*/
.top-triangle{
    width: 0;
    height: 0;
    border-bottom: 50px solid red;
    border-left: 86px solid transparent;
    border-right: 86px solid transparent;
}
.center{
    width: 172px;
    height: 100px;
    background: red;
}
.bottom-triangle{
    width: 0;
    height: 0;
    border-top: 50px solid red;
    border-left: 86px solid transparent;
    border-right: 86px solid transparent;
}

Aus dem obigen Code können wir eine regelmäßige sechseckige Verformung erhalten
Methode 2: Drehen Sie drei Rechtecke in verschiedenen Winkeln, um ein regelmäßiges Sechseck zu erhalten.
Wichtige Punkte: Überlauf: versteckt; Es gibt jedoch keine Möglichkeit, dem auf diese Weise erstellten Sechseck Text hinzuzufügen. Führen Sie den obigen Code aus, um das folgende Bild zu erhalten:

【Empfohlenes Lernen: „css-Video-Tutorial

“ 】

Das obige ist der detaillierte Inhalt vonSo implementieren Sie Sechsecke in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!