Zick-Zack-Linien mit CSS3

Es gehört zu den Standard-Disziplinen eines Webdesigners den Übergang zwischen verschiedenen Seitenbereichen attraktiv zu gestalten. Ein häufig gesehenes Stil-Element ist dabei die Zick-Zack-Linie, die insbesondere im Retro-Look und in Verbindung mit Ribbons gerne eingesetzt wird. Normalerweise wird dafür ein grafisches Pattern gestaltet und horizontal gekachelt, doch es geht auch mit CSS3.

Zick-Zack-Linie: Photoshop vs. CSS3

In vielen Bereichen ersetzt CSS3 die Arbeit mit Photoshop. Doch es gibt immer Vor- und Nachteile, die es abzuwägen gilt.

Vorteile

Nachteile

Live-Demo

Die nachfolgende Abbildung ist ein Live-Beispiel. Wenn ihr keine Zick-Zack-Linie seht, unterstützt euer Browser keine CSS3 Gradients und/oder background-size.

Demo öffnen

HTML/CSS3-Code

Mit folgendem Code lässt sich der Übergang realisieren. In HTML wird nur ein Container-Element benötigt.

<div id="demo"></div>

In CSS arbeiten wir hauptsächlich mit dem Pseudoelement ::before und einem darin enthaltenen CSS Gradient. Mit Gradienten (Verläufen) können verschiedene Muster erzeugt werden – so auch das ZickZack-Muster.

body {
	background: #b29e7f;
	margin: 0;
}

#demo {
	width: 100%;
	height: 150px;
	position: relative;
	background: #045B76;
}

#demo::before {
	content: '';
	position: absolute;
	bottom: -30px;
	left: 0;
	right: 0;
	height: 60px;
	background-size: 24px 48px;
	background-repeat: repeat-x;
	background-image: -webkit-linear-gradient(45deg, transparent 34%, #045B76 34%, #045B76 66%, transparent 66%), -webkit-linear-gradient(315deg, transparent 34%, #045B76 34%, #045B76 66%, transparent 66%);
	background-image: -moz-linear-gradient(45deg, transparent 34%, #045B76 34%, #045B76 66%, transparent 66%), -moz-linear-gradient(315deg, transparent 34%, #045B76 34%, #045B76 66%, transparent 66%);
	background-image: linear-gradient(45deg, transparent 34%, #045B76 34%, #045B76 66%, transparent 66%), linear-gradient(315deg, transparent 34%, #045B76 34%, #045B76 66%, transparent 66%);
}

Geschrieben von Jonas

Benutzerbild

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing

Feedback & Ergänzungen – 12 Kommentare

  1. Jascha
    schrieb am 09.03.2016 um 20:21 Uhr:

    Kann ich den Effekt bei einem Div-Container auch oben und unten anwenden ?

    Antworten
  2. Alexander
    schrieb am 11.10.2013 um 10:30 Uhr:

    servus miteinand,

    Danke für diese Erläuterung, und dem Beispiel Code. Da ich gerade an einem Projekt arbeite, wo der Hintergrund eine Pinnwand ist, kommt dieser Code super an.

    Ich habe eine Frage dazu.
    Wie bekomme ich das umgekehrt hin (dass die Zacken oben sind)? Beiße mir gerade die Zähne dran aus. Ich habe den Code in der php Datei doppelt eingefügt. Aber statt demo habe ich es „oben“ umbenannt.

    Gruß Alexander

    Antworten
    • Jonas Hellwig
      schrieb am 11.10.2013 um 10:43 Uhr:

      Hallo Alexander, der Effekt basiert auf einem linearen CSS-Farbverlauf. Drehe hier einfach die Winkel.

      Antworten
      • Alexander
        schrieb am 11.10.2013 um 11:29 Uhr:

        servus Jonas,

        Danke für die schnelle Antwort. Ich habe unterdessen das etwas anders gelösst.Statt diesen code

        #oben {
        width: 100%;
        height: 150px;
        position: relative;
        background: #045B76;
        }

        habe ich diesen genommen.

        #oben {
        width: 100%;
        height: 20px;
        position: relative;
        background: rgb(4, 91, 118);
        margin-top: -20px;
        margin-bottom: 20px;
        }

        Jetzt nur noch die Farben ändern und alles sollte perfekt sein.

        Ja, alles OK :D

        Gruß Alexander

  3. gezackter Übergang zickzack Hintergrund mit css3 | CSS3.de
    schrieb am 28.07.2013 um 22:19 Uhr:

    […] der Farben sollten dabei gezackt sein. Eine Lösung hierfür hatte ich schon einmal beim Kulturbanausen mit linear-gradient gesehen. Hier die Umsetzung: #css3gezackt { /* body */ text-align: center; […]

    Antworten
  4. Max
    schrieb am 17.06.2013 um 12:52 Uhr:

    Muss es nicht heißen #demo:before?

    Antworten
    • Jonas Hellwig
      schrieb am 17.06.2013 um 13:12 Uhr:

      Beide Schreibweisen funktionieren und sind korrekt.

      Antworten
  5. Felix
    schrieb am 31.10.2012 um 20:55 Uhr:

    Super Tipp! So etwas kann man gebrauchen. Vielen Dank!
    Sind die beiden Seiten in der CSS mit -webkit und -moz wirklich erforderlich?

    Antworten
  6. Nico
    schrieb am 30.10.2012 um 19:15 Uhr:

    Ist ja cool^^ Danke für den Hinweis :)

    Antworten
  7. Linktipp: Zick-Zack-Linien mit CSS3 | pixelstrol.ch
    schrieb am 30.10.2012 um 10:13 Uhr:

    […] Zick-Zack-Linien mit CSS3 […]

    Antworten
  8. Stefan
    schrieb am 30.10.2012 um 09:36 Uhr:

    Genialer Tipp, sowas habe ich mich schon öfters gefragt wie ich solche Zick-Zack-Muster erstellen kann, mit einfachen Mitteln und vor allem so das ich als Laie das auch hinbekomme. :)

    Danke dafür, wird dann zu gegebener Zeit ReBloggt. :D

    Antworten
    • Jonas Hellwig
      schrieb am 30.10.2012 um 09:44 Uhr:

      Hallo Stefan, vielen Dank für dein Feedback und den Hinweis auf den Rechtschreibfehler :) Ist alles korrigiert.

      Antworten

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 →