Parallelogramme mit CSS erstellen
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.
Workshops und Seminare von kulturbanause
Visual Prototyping, Responsive Design, CSS Grid & Flexbox, Sketch, Adobe XD …
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);
}Jetzt bist du gefragt!
Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.
Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!
Stephan
Verfasst am 21. Januar 2016 um 12:30 Uhr.
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?
Jonas Hellwig
Verfasst am 21. Januar 2016 um 12:39 Uhr.
Klar – habs soeben nochmal getestet.
Stephan Lorenz
Verfasst am 21. Januar 2016 um 19:36 Uhr.
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.:)
Martin
Verfasst am 22. Januar 2016 um 7:56 Uhr.
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
Jonas Hellwig
Verfasst am 22. Januar 2016 um 9:39 Uhr.
Da hast du recht. Wenn du einen Lösungsansatz dafür hast – immer her damit :)
Martin
Verfasst am 22. Januar 2016 um 10:01 Uhr.
haha, ne, leider auch nicht spontan, sonst hätte ich diesen schon mitgeteilt ;)
müsste auch mal auf die suche gehen…
Marco
Verfasst am 22. Januar 2016 um 11:11 Uhr.
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);
}
}
Jonas Hellwig
Verfasst am 22. Januar 2016 um 12:16 Uhr.
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.
hans
Verfasst am 22. Januar 2016 um 10:46 Uhr.
hat einer ne ahnung wie man ein trapez macht?
René Philipp
Verfasst am 11. April 2016 um 8:36 Uhr.
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.
Ridli
Verfasst am 17. Februar 2016 um 15:06 Uhr.
Interessanter Artikel! Eine klasse Idee! HTML-Grundaufbau der Navigation ist ausführlich erklärt.
Schuler Freiburg
Verfasst am 3. März 2016 um 11:41 Uhr.
Wiedermal ein guter Tipp. Habe sowas bisher immer mit Grafiken gelöst. Ist so natürlich viel eleganter. Danke!
René Philipp
Verfasst am 11. April 2016 um 8:39 Uhr.
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. :-)
Torsten Beyer
Verfasst am 12. Januar 2018 um 21:40 Uhr.
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.
Jonas Hellwig
Verfasst am 14. Januar 2018 um 20:51 Uhr.
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;
}