kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

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 …

Jetzt Frühbucher-Rabatte sichern!

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

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!

Das könnte dich auch interessieren

15 Kommentare

  1. 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.:)

  2. 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.

  3. 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.

  4. Ridli

    Verfasst am 17. Februar 2016 um 15:06 Uhr.

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

  5. 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!

  6. 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. :-)

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

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.