Ich habe an einem Header mit einem Zick-Zack-Rand gearbeitet. Eine Möglichkeit, dies zu tun, besteht darin, Bilder zu verwenden, um den Zick-Zack-Effekt zu erzielen.

(1) Gibt es eine Möglichkeit, einen praktischen browserübergreifenden Zick-Zack-Rand in CSS ohne die Verwendung von Bildern zu erstellen?

Ich versuche auch, einen strukturierten Hintergrund auf diese Überschrift zu setzen, die sich zu den Zickzacken erstreckt. Die vertikale Größe des Headers kann sich jedoch ändern, und ich kann den Header nicht als einzelnes Bild implementieren.

Wenn ich versuche, sowohl den Zick-Zack-Kanten als auch dem Header-Element eine Textur hinzuzufügen, ist die Textur wahrscheinlich nicht synchron.

(2) Gibt es Ideen zur Implementierung eines strukturierten Hintergrunds, der sich über die Zickzacklinien erstreckt, ohne nicht synchron zu sein?

Mein [alter] Code (zusammen mit einer Textur) ist hier aufjsFiddle.

body {
  padding: 20px;
}

header {
  width: 240px;
  background-color: #BCED91;
}

header:after {
  content: " ";
  display: block;
  position: relative;
  width: 240px;
  bottom: -15px;
  height: 15px;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAPCAYAAACWV43jAAAAw0lEQVRIx83RsQ3CMBCF4T83AZKLVOmyBa1HSIlXwKySGaDOBClZAToWQIpETQONyxAS+2J4pe9knd5X9EP7QicPYAsUwBnYaHwqSsd1QGmNv1rjL0AZ3pJTKDTorPGnsUE/tDvg+KsG70D96TiAMKvDbtYDO6Cyxt++LYadKpY8hthNtTaVGHLRJJ3R5mJy0SbVJp9D7FJaSyWXNUk1yGVt0lTyMWK3ZmtLySUnaQy55CZdSi7AHmis8U/+JOGWBji8AaYPVy6VELZvAAAAAElFTkSuQmCC) repeat-x;
}

img {
  margin-top: 50px;
}

<header>
  <br />
  <br />
  <br />
  <br />
</header>

<img src="http://i.imgur.com/qKsVr.png" />

Bearbeiten Sie # 1:

Danke Ana für den Code. Ich nahm es und verbesserte es.

http://dabblet.com/gist/3401493

Ich denke nicht, dass ein einheitlicher Hintergrund möglich sein wird.