kulturbanause Blog

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

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.

Workshops und Seminare von kulturbanause

Visual Prototyping, Responsive Design, CSS Grid & Flexbox, WordPress, Adobe XD, HTML & CSS Grundlagen, Website-Optimierung …

Jetzt Frühbucher-Rabatte sichern!

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.

  • Schnellere Umsetzung
  • Performanter, da keine Grafik geladen werden muss
  • Optisch nicht so detailliert wie eine Lösung mit Hilfe einer Grafik
  • Wird nur in modernen Browsern angezeigt. Alte Browser zeigen einen geraden Übergang.

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.


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

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

10 Kommentare

  1. Stefan

    Verfasst am 30. Oktober 2012 um 9: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

    • Jonas Hellwig

      Verfasst am 30. Oktober 2012 um 9:44 Uhr.

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

  2. Nico

    Verfasst am 30. Oktober 2012 um 19:15 Uhr.

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

  3. Felix

    Verfasst am 31. Oktober 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?

  4. Max

    Verfasst am 17. Juni 2013 um 12:52 Uhr.

    Muss es nicht heißen #demo:before?

    • Jonas Hellwig

      Verfasst am 17. Juni 2013 um 13:12 Uhr.

      Beide Schreibweisen funktionieren und sind korrekt.

  5. Alexander

    Verfasst am 11. Oktober 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

    • Jonas Hellwig

      Verfasst am 11. Oktober 2013 um 10:43 Uhr.

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

      • Alexander

        Verfasst am 11. Oktober 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

  6. Jascha

    Verfasst am 9. März 2016 um 20:21 Uhr.

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

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.