zig-zag

by satantx

HTML

<div class="zigzag"></div>

<div class="zigzag"></div>

<div class="zigzag"></div>

SCSS

$height: 16px;
$halfheight: ($height/2);
$thickness: 110%; // increase to make the line thicker
$offset: 4px;
$backgroundcolor: #F7F2E2;
$linecolor: #F7A9B9;

body {
	background: $backgroundcolor;
}

.zigzag {
	margin: 7.5% 0;
	background: $backgroundcolor;
	position: relative;
	height: $height;
	z-index: 1;
	&:before,
	&:after {
		content: "";
		display: block;
		position: absolute;
		left: 0;
  		right: 0;
	}
	&:before {
		height: ($height - $offset);
		top: $thickness;
		background: linear-gradient(-135deg, $linecolor $halfheight, transparent 0) 0 $halfheight, linear-gradient( 135deg, $linecolor $halfheight, transparent 0) 0 $halfheight;
		background-position: top left;
		background-repeat: repeat-x;
		background-size: $height $height;
	}
	&:after {
		height: $height;
		top: 100%;
		background: linear-gradient(-135deg, $backgroundcolor $halfheight, transparent 0) 0 $halfheight, linear-gradient( 135deg, $backgroundcolor $halfheight, transparent 0) 0 $halfheight;
		background-position: top left;
		background-repeat: repeat-x;
		background-size: $height $height;
	}
}