Zick-Zack-Linien mit CSS3

Von: Jonas

Mit CSS-Verläufen können ZickZack-Muster unkompliziert hergestellt werden, ohne dass eine Grafik verwendet werden muss.

Aktualisiert am 30. Oktober 2012 12 Kommentare

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

• Schnellere Umsetzung
• Performanter, da keine Grafik geladen werden muss

Nachteile

• 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 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 Hellwig

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