Zig-Zag Background Patterns

Check out the following CSS zig-zag patterns that you can add to your website. This shows how many different patterns can be acheived by simple changes in the code.

<style scoped>
.pattern {min-height:200px;}

#zig-zag1 {
background: 
linear-gradient(135deg, #ccc 25%, transparent 25%) -50px 0,
linear-gradient(225deg, #ccc 25%, transparent 25%) -50px 0,
linear-gradient(315deg, #ccc 25%, transparent 25%),
linear-gradient(45deg, #ccc 25%, transparent 25%);	
background-size: 100px 100px;
background-color: #eee;
}
</style>

<div id="zig-zag1" class="pattern">
<h2>Sample text</h2>
</div>

<style scoped>
.pattern {min-height:200px;}

#zig-zag2 {
background: 
linear-gradient(135deg, #ccc 25%, transparent 25%) -50px 0,
linear-gradient(225deg, #eee 25%, transparent 25%) -50px 0,
linear-gradient(315deg, #ccc 25%, transparent 25%),
linear-gradient(45deg, #eee 25%, transparent 25%);	
background-size: 100px 100px;
background-color: #fff;
}
</style>

<div id="zig-zag2" class="pattern">
<h2>Sample text</h2>
</div>

<style scoped>
.pattern {min-height:200px;}

#zig-zag3 {
background: 
linear-gradient(145deg, #ccc 25%, transparent 25%) -50px 0,
linear-gradient(225deg, #ccc 25%, transparent 25%) -50px 0,
linear-gradient(315deg, #ccc 25%, transparent 25%),
linear-gradient(35deg, #ccc 25%, transparent 25%);	
background-size: 100px 100px;
background-color: #eee;
}
</style>

<div id="zig-zag3" class="pattern">
<h2>Sample text</h2>
</div>

<style scoped>
.pattern {min-height:200px;}

#zig-zag4 {
background: 
linear-gradient(135deg, #ccc 25%, transparent 25%) -20px 0,
linear-gradient(225deg, #ccc 25%, transparent 25%) -20px 0,
linear-gradient(315deg, #ccc 25%, transparent 25%),
linear-gradient(45deg, #ccc 25%, transparent 25%);	
background-size: 100px 100px;
background-color: #eee;
}
</style>

<div id="zig-zag4" class="pattern">
<h2>Sample text</h2>
</div>

<style scoped>
.pattern {min-height:200px;}

#zig-zag10 {
background: 
linear-gradient(135deg, #ccc 25%, transparent 25%) -25px 0,
linear-gradient(225deg, #ccc 25%, transparent 25%) -25px 0,
linear-gradient(315deg, #ccc 25%, transparent 25%),
linear-gradient(45deg, #ccc 25%, transparent 25%);	
background-size: 50px 50px;
background-color: #eee;
}
</style>

<div id="zig-zag10" class="pattern">
<h2>Sample text</h2>
</div>

<style scoped>
.pattern {min-height:200px;}

#zig-zag11 {
background: 
linear-gradient(135deg, #eee 25%, transparent 25%) -10px 0,
linear-gradient(225deg, #eee 25%, transparent 25%) -10px 0,
linear-gradient(315deg, #eee 25%, transparent 25%),
linear-gradient(45deg, #eee 25%, transparent 25%);	
background-size: 20px 20px;
background-color: #fff;
}
</style>

<div id="zig-zag11" class="pattern">
<h2>Sample text</h2>
</div>

Qhmit.com

Zig-Zag Background Patterns

Related