CSS Repetitive Jagged Background

Long time ago there were no posts on CSS for Habré and I decided to fill this gap. Today we are learning to prepare a jagged background using only CSS tools and no images!

Important requirements for such a fence:
')

• No images!
• He should calmly stretch horizontally.
• Must necessarily support an uneven background at the substrate
• The background should not require any extra markup. It is best to avoid pseudo-elements (saving is good).

Supported browsers: Chrome, Firefox (> 3.6), Opera (> = 12), Safari (> = 5), IE10.

For IE 7, 8 we will have a fallback in the form of a regular fill. But IE9 has a problem - it does not support gradients, but it also understands hsla and rgba colors. Truly a “great” browser. Well, you have to ignore it for now. If someone prompts a good fallback for IE, I will only be grateful.

Well, let's get started.

Our jagged edge will consist of two overlapping gradients in the form of triangles.

background-image: linear-gradient(to bottom right, transparent 50.5%, lightblue 50.5%), linear-gradient(to bottom left, transparent 50.5%, lightblue 50.5%); /* 50.5%,      */ background-repeat: repeat-x, repeat-x; background-position: 10px 0, 10px 0; /*      */ background-size: 20px 20px, 20px 20px; 

To hide all the unpleasant moments from the bottom just put on top of a solid color.

 border-top: 10px solid transparent; /*     */ background-image: linear-gradient(lightblue, skyblue), /*   ,         */ linear-gradient(to bottom right, transparent 50.5%, lightblue 50.5%), linear-gradient(to bottom left, transparent 50.5%, lightblue 50.5%); background-repeat: repeat, repeat-x, repeat-x; background-position: 0 0, 10px 0, 10px 0; background-size: auto auto, 20px 20px, 20px 20px; background-clip: padding-box, border-box, border-box; /*      */ background-origin: padding-box, border-box, border-box, border-box, border-box; /*     ,      */ 

Well, that's done. It remains to add the same teeth from the bottom.

 border-top: 10px solid transparent; background-image: linear-gradient(lightblue, skyblue), linear-gradient(to bottom right, transparent 50.5%, lightblue 50.5%), linear-gradient(to bottom left, transparent 50.5%, lightblue 50.5%), linear-gradient(to top right, transparent 50.5%, skyblue 50.5%), linear-gradient(to top left, transparent 50.5%, skyblue 50.5%); background-repeat: repeat, repeat-x, repeat-x, repeat-x, repeat-x; background-position: 0 0, 10px 0, 10px 0, 10px 100%, 10px 100%; background-size: auto auto, 20px 20px, 20px 20px, 20px 20px, 20px 20px; background-clip: padding-box, border-box, border-box, border-box, border-box; background-origin: padding-box, border-box, border-box, border-box, border-box; 

Do not forget about fallback:

 background-color: lightblue; background-color: hsla(0, 0%, 0%, 0); 

As a result, we got a block with teeth that you can stretch as much as you like. Pseudo-elements are not involved, they can be used, for example, to add the same teeth on the sides.

Demo