Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

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.

Schulungen von kulturbanause

Intensive Trainings mit hohem Praxisbezug. Z. B.: Coding for Designers oder Seminar: CSS für Webanwendungen

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);
}

Beispiel anschauen

Geschrieben von kulturbanause Team

thumb

Beiträge bei denen das kulturbanause-Team als Autor angegeben ist, wurden von mehreren Personen in Zusammenarbeit geschrieben. Wir nutzen diesen Blog als öffentliches Archiv und um euch bei alltäglichen Problemen im Zusammenhang mit der Erstellung von Websites zu helfen. Neben diesem Blog bieten wir auch Trainings wie Schulungen, Bücher oder Videos an. Und natürlich unterstützen wir auch gerne im Rahmen unserer Agenturtätigkeit.

Feedback & Ergänzungen – 18 Kommentare

  1. Marleen
    schrieb am 13.02.2020 um 15:03 Uhr:

    Hi!
    Könnte man bei dem Element auch diagonal Ecken abrunden?
    Danke und Gruß :)

    Antworten
    • Jonas Hellwig
      schrieb am 13.02.2020 um 17:59 Uhr:

      Ja, das sollte gehen, indem du ::before und ::after per CSS einen entsprechenden border-radius mitgibst.

      Antworten
      • Marleen
        schrieb am 14.02.2020 um 08:17 Uhr:

        Probier ich aus, danke dir!

  2. Torsten Beyer
    schrieb am 12.01.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.

    Antworten
    • Jonas Hellwig
      schrieb am 14.01.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;
      }

      Antworten
  3. René Philipp
    schrieb am 11.04.2016 um 08: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. :-)

    Antworten
  4. Schuler Freiburg
    schrieb am 03.03.2016 um 11:41 Uhr:

    Wiedermal ein guter Tipp. Habe sowas bisher immer mit Grafiken gelöst. Ist so natürlich viel eleganter. Danke!

    Antworten
  5. Ridli
    schrieb am 17.02.2016 um 15:06 Uhr:

    Interessanter Artikel! Eine klasse Idee! HTML-Grundaufbau der Navigation ist ausführlich erklärt.

    Antworten
  6. hans
    schrieb am 22.01.2016 um 10:46 Uhr:

    hat einer ne ahnung wie man ein trapez macht?

    Antworten
    • René Philipp
      schrieb am 11.04.2016 um 08: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.

      Antworten
  7. Martin
    schrieb am 22.01.2016 um 07: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

    Antworten
    • Jonas Hellwig
      schrieb am 22.01.2016 um 09:39 Uhr:

      Da hast du recht. Wenn du einen Lösungsansatz dafür hast – immer her damit :)

      Antworten
      • Martin
        schrieb am 22.01.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
        schrieb am 22.01.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
        schrieb am 22.01.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.

  8. Stephan
    schrieb am 21.01.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?

    Antworten
    • Jonas Hellwig
      schrieb am 21.01.2016 um 12:39 Uhr:

      Klar – habs soeben nochmal getestet.

      Antworten
      • Stephan Lorenz
        schrieb am 21.01.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.:)

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →