<div class='bar'></div>
<div class='bar'></div>
<div class='bar'></div>
@import 'compass/css3';

$n: 1 2 5; // how many backgrounds to stack up for each case
$base-bg: linear-gradient(135deg, // background to be stacked
		#000 .125em, #0092b7 0, 
		#0092b7 calc(50% - .125em), #000 0, 
		#000 calc(50% + .125em), #0092b7 0, 
	  #0092b7 calc(100% - .125em), #000 0);
$size: 1.5em/sqrt(2); // background-size

.bar {
	margin: 2em 0 0;
	width: 32em; max-width: 90%; height: 4em;
	box-shadow: 0 0 .125em #333;
	background-repeat: repeat-y;
	background-size: $size $size;
	
	&:before {
		display: block;
		transform: translateY(-110%);
		background: #ff6d48;
		font: 700 1.25em/ 1.5 monospace;
		text-indent: .5em;
	}
	
	@for $i from 1 through 3 {
		&:nth-child(#{$i}) {
			$curr-n: nth($n, $i);
			$p: if($curr-n > 1, 's', '');
			$bg: ();
			$pos: ();
			
			@for $j from 0 to $curr-n {
				$bg: $bg, $base-bg;
				$pos: $pos, $j*$size 0;
			}
			
			background-image: $bg;
			background-position: $pos;
			
			&:before { content: '#{$curr-n} background#{$p} tiled horizontally' }
		}
	}
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.