Parallelogramme mit CSS erstellen
Von: Jonas In diesem Beitrag zeigen wir euch anhand einer Navigation, wie ihr mit Hilfe von CSS Parallelogramme erzeugen könnt.
Im modernen Webdesign wird häufig auf rechteckige Gestaltungselemente zurückgegriffen. Ein Parallelogramm kann diese klaren Strukturen brechen und mehr Abwechslung ins Layout bringen. Wie ihr mit Hilfe von CSS ganz einfach Parallelogramme erstellen könnt bei denen der enthaltene Text nicht verzerrt wird, erklären wir euch in diesem Artikel anhand des Beispiels einer Navigation.
Der HTML-Grundaufbau
Beim HTML-Grundaufbau der Navigation gibt es keine weiteren Besonderheiten. Standardmäßig befinden sich alle Links in einer ungeordneten Liste. Der spätere CSS-Code lässt sich aber auch auf alle Block-Elemente, ob einzeln stehend oder verschachtelt, anwenden.
<ul>
<li><a href="#">Menüpunkt</a></li>
<li><a href="#">Menüpunkt</a></li>
<li><a href="#">Menüpunkt</a></li>
<li><a href="#">Menüpunkt</a></li>
</ul>CSS-Parallelogramm mit Transformation und Pseudoelement erstellen
Um aus den einzelnen Links des Menüs Parallelogramme zu erzeugen, müssen die <a>-Tags zu Block-Elementen (display: block;) gemacht werden und relativ positioniert werden (position: relative;).
a {
display: block;
position: relative;
}Das Pseudoelement ::after
Anschließend kommt das Pseudoelement ::after zum Einsatz. Dieses Element wird absolut zum <a>-Tag positioniert und mit den Angaben top, right, bottom und left über dessen gesamte Fläche ausgedehnt. Um es sichtbar zu machen, bekommt es eine Hintergrundfarbe.
a::after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: darkblue;
}Die Ausrichtung auf der z-Achse verschieben
Schaut man sich nun das Ergebnis im Browser an, wird man blaue Rechtecke sehen, die den Text der Menüpunkte überdecken. Mit Hilfe eines negativen z-index (z-index: -1;) schieben wir das soeben erzeugte Pseudoelement nach hinten und machen so den Text wieder sichtbar.
a::after {
...
z-index: -1;
}Aus dem Rechteck ein Parallelogramm erzeugen
Um nun aus den erzeugten Rechtecken ein Parallelogramm zu machen benötigt ihr nur noch die CSS-Eigenschaft transform. Als Wert gebt ihr skew und den von euch gewünschten Winkel der Neigung an.
a::after {
...
transform: skew(-45deg);
}Der vollständige CSS-Code
Den vollständigen CSS-Code könnt ihr untenstehend sehen. Des Weiteren findet ihr dort auch ein Funktionsbeispiel. Solltet ihr weitere Fragen zu den Pseudoelementen ::before und ::after haben empfehlen wir euch diesen Artikel.
a {
display: block;
position: relative;
}
a::after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
transform: skew(-45deg);
}
Hi!
Könnte man bei dem Element auch diagonal Ecken abrunden?
Danke und Gruß :)
Ja, das sollte gehen, indem du ::before und ::after per CSS einen entsprechenden border-radius mitgibst.
Probier ich aus, danke dir!
Hat jemand eine Idee, wie ich das erste Element mit geradem Abschluss an der linken Seite mache, d.h. als Trapezoid mit rechtem Winkel am Anfang.
Hallo Thorsten, du kannst mit folgendem Code dem 1. Listenpunkt links noch ein
::before-Element geben:li:first-child a:before {content: '';
display: block;
position: absolute;
background: #00018a;
top: 0;
left: -1.5em;
bottom: 0;
width: 3em;
}
Hallo, Marco,
der span-Tag wäre ja überflüssig, wenn es in CSS3 eine Pseudoklasse :text zum separaten Formatieren eines Textes in einem Blockelement gäbe. Vielleicht hatte ja noch niemand die Idee dazu. :-)
Wiedermal ein guter Tipp. Habe sowas bisher immer mit Grafiken gelöst. Ist so natürlich viel eleganter. Danke!
Interessanter Artikel! Eine klasse Idee! HTML-Grundaufbau der Navigation ist ausführlich erklärt.
hat einer ne ahnung wie man ein trapez macht?
Hallo, Hans,
Ein Trapez geht auch. Dafür müßte folgendes ergänzt werden:
a::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 2em;
background: darkblue;
z-index: -1;
transform: skew(45deg);
}
Außerdem muß der Wert von right beim obigen Code auf 2em geändert werden. Also bei ::after wird das Parallelogramm etwas rechts eingerückt und bei ::before denn eben links. Außerdem sind die Drehwinkel entgegengesetzt.
Ich habe es gerade bei mir getestet. Allerdings ist die Testseite nicht im Netz zu finden.
Hallo Jonas,
die Idee ist cool.
Kleinigkeit:
Es ist nur supoptimal, dass in den Ecken jeweils der vorherige oder folgende Menüpunkt aktiv ist…
Gruss
Martin
Da hast du recht. Wenn du einen Lösungsansatz dafür hast – immer her damit :)
haha, ne, leider auch nicht spontan, sonst hätte ich diesen schon mitgeteilt ;)
müsste auch mal auf die suche gehen…
Pseudo Element weglassen und folgendes:
a {
margin-right: 2px;
color: white;
padding: 1em 2.5em;
display: block;
position: relative;
text-decoration: none;
z-index: 1;
transform: skew(-45deg);
background: darkblue;
span {
display: block;
transform: skew(45deg);
}
}
Ja, die Lösung ist auch häufig, aber mich stört das überflüssige HTML-Element, das ja nur fürs Styling benötigt wird.
Vielen Dank für den Beitrag. Gibt ein immer mal wieder ne kleine Anregung wie man gewisse Dinge realisieren kann!
Funktioniert das auch mit Filtern wie Blur?
Klar – habs soeben nochmal getestet.
Vielen Dank für die schnelle Antwort!
Da werde ich mal versuchen ein Blur Filter auf den Background der des Off-Canvas Menü von sidr zu bekommen. Damit man den Hintergrund leicht sieht. Ähnlich der Mitteilungszentrale von einem iOS Gerät.:)