Ich verstehe, dass dies eine ziemlich alte Frage ist, aber ich dachte, ich würde eine Antwort hinzufügen, um mehr über wie es funktioniert zu zeigen.
Also zuerst müssen wir ein einzelnes Element auf der Seite erstellen. Ich habe eine Größe von height:300px; width:180px; und einen Rahmenradius von 10px gewählt. Nur weil ich die Rundung der Zahl mag (vergebe das Wortspiel). Geben wir diesem Element position:relative; , bedeutet dies, dass wir hier alles relativ zu diesem div positionieren können.
Wir müssen dann zwei Pseudoelemente mit der gleichen Höhe und Breite wie die Eltern erstellen.
Da die Pseudoelemente genau das sind, Pseudoelemente, müssen wir ihnen absolute hinzufügen. Und da wir Sachen in die Eltern legen können, brauchen wir diese nicht wirklich, also setze sie auf content:
Dies führt uns dazu, wie wir das Sechseck und nicht das Rechteck, das wir gerade haben, erzeugen können. Um dies zu erreichen, müssen wir eine Rotation einschließen, um die anderen Seiten des Sechsecks zu erzeugen. Da es 6 Seiten gibt und die Winkel zu 360 hinzugefügt werden müssen, können wir eines der Pseudoelemente um 60 Grad drehen. Die andere werden wir um -60 Grad (oder 300 Grad, wenn Sie bevorzugen) drehen.
Dies lässt uns mit unserem "Sechseck", in dem wir einige nette Styling- und Hover-Animationen hinzufügen können, wie es nötig ist:
Versuchen Sie Folgendes: (funktioniert in Chrom und in 10)
%Vor% Mit Ihrem aktuellen Code können Sie das Dreieck oben und unten leicht ändern, um ihm ein gekrümmtes Aussehen zu geben. Fügen Sie eine Breite von 4px zu #hexagon-circle:before und #hexagon-circle:after hinzu und reduzieren Sie border-left und border-right by 2px jeweils.
Es ist keine echte Kurve, da es eine gerade Linie erzeugt, aber es gibt den Eindruck, dass es gekrümmt sein könnte, wenn es im Kontext der Form betrachtet wird.
Tags und Links html css css3 css-shapes