Stripes in CSS

Stripes are pretty easy to do in CSS these days. CSS gradients via the background-image property really got our back. I thought I'd document some variations in one easy to reference place.

Example 1)

<style type="text/css">

.module {
background: white;
border: 1px solid #ccc;
margin: 3%;
}
.module > h2 {
padding: 1rem;
margin: 0 0 0.5rem 0;
}
.module > p {
padding: 0 1rem;
}

.stripe-7 {
color: white;
background: -webkit-repeating-radial-gradient(circle, purple, purple 10px, #4b026f 10px, #4b026f 20px);
background: repeating-radial-gradient(circle, purple, purple 10px, #4b026f 10px, #4b026f 20px);
}

</style>

<div class="module">

<h2 class="stripe-7">Radial</h2>

<p>You could do some schenigans where you have a big rotated element within this header area (with hidden overflow) that has these stripes. That way you could get away with not using repeating-linear-gradient.</p>


</div>

Output :)

Example 2)

<style type="text/css">

div {
height: 50px;
margin-bottom: 10px;
}

.progress {
background: -webkit-repeating-linear-gradient(135deg, #666, #666 25%, #5b5b5b 25%, #5b5b5b 50%, #666 50%) top left fixed;
background: repeating-linear-gradient(-45deg, #666, #666 25%, #5b5b5b 25%, #5b5b5b 50%, #666 50%) top left fixed;
background-size: 30px 30px;
}
.progress .current {
width: 25%;
-webkit-animation: width 5s infinite;
animation: width 5s infinite;
background: -webkit-repeating-linear-gradient(135deg, #465298, #465298 25%, #3f4988 25%, #3f4988 50%, #465298 50%) top left fixed;
background: repeating-linear-gradient(-45deg, #465298, #465298 25%, #3f4988 25%, #3f4988 50%, #465298 50%) top left fixed;
background-size: 30px 30px;
}

.progress-funky {
background: -webkit-repeating-linear-gradient(135deg, #666, #666 10px, #5b5b5b 10px, #5b5b5b 20px, #666 20px) top left;
background: repeating-linear-gradient(-45deg, #666, #666 10px, #5b5b5b 10px, #5b5b5b 20px, #666 20px) top left;
}
.progress-funky .current {
width: 25%;
-webkit-animation: width 5s infinite;
     animation: width 5s infinite;
background: -webkit-repeating-linear-gradient(135deg, #465298, #465298 10px, #3f4988 10px, #3f4988 20px, #465298 20px) top left;
background: repeating-linear-gradient(-45deg, #465298, #465298 10px, #3f4988 10px, #3f4988 20px, #465298 20px) top left;
}

@-webkit-keyframes width {
0% {
width: 0%;
}
100% {
width: 100%;
}
}

@keyframes width {
0% {
width: 0%;
}
100% {
width: 100%;
}
}

</style>

<div class='progress'>
<div class='current'></div>
</div>

<div class='progress-funky'>
<div class='current'></div>

</div>

Output :)

Source :- http://css-tricks.com/stripes-css/