<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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.