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!
