CodePen

HTML

            
              <div class="module">
  <h2 class="stripe-1">Colored Stripes</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis hic sapiente asperiores minus animi nam temporibus cumque magnam doloribus vitae voluptatum cupiditate nostrum omnis vero adipisci recusandae maxime quo labore.</p>
</div>
<div class="module">
  <h2 class="stripe-2">Gradient Stripes</h2>
  <p>It's actually the background that has a gradient, it's just half the stripes are transparent, letting that through.</p>
</div>
<div class="module">
  <h2 class="stripe-3">Over Image</h2>
  <p>Quibusdam quos dolorum temporibus minima delectus suscipit consequatur excepturi illo veritatis adipisci dicta accusamus maiores vitae exercitationem saepe! Ut ex aut ab corporis nulla expedita voluptatem velit doloremque qui sapiente.</p>
</div>
<div class="module">
  <h2 class="stripe-4">Other Direction, Different Angle</h2>
  <p>If the colors have a lot of contrast, this one can be very jagged. Even normal tricks like translateZ(0) don't work to fix it.</p>
</div>
<div class="module">
  <h2 class="stripe-5">Background-Size</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>
<div class="module">
  <h2 class="stripe-6">Vertical</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>
<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>
            
          
!

CSS

            
              body {
  background: #eee;
  display: flex;
  flex-wrap: wrap;
}

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

.stripe-1 {
  color: white;
  background: repeating-linear-gradient(
    45deg,
    #606dbc,
    #606dbc 10px,
    #465298 10px,
    #465298 20px
  );
}

.stripe-2 {
  color: black;
  background: 
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 10px,
      #ccc 10px,
      #ccc 20px
    ),
    linear-gradient(
      to bottom,
      #eee,
      #999
    );
}

.stripe-3 {
  background: repeating-linear-gradient(
    45deg,
    rgba(0, 0, 0, 0.2),
    rgba(0, 0, 0, 0.2) 10px,
    rgba(0, 0, 0, 0.3) 10px,
    rgba(0, 0, 0, 0.3) 20px
  ),
  url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/old_map_@2X.png);
}

.stripe-4 {
  color: white;
  background: repeating-linear-gradient(
    -55deg,
    #222,
    #222 10px,
    #333 10px,
    #333 20px
  );
}

.stripe-5 {
  color: white;
  background: linear-gradient(
    to bottom,
    #5d9634,
    #5d9634 50%,
    #538c2b 50%,
    #538c2b
  );
  background-size: 100% 20px;
} 

.stripe-6 {
  color: black;
  background: repeating-linear-gradient(
    to right,
    #f6ba52,
    #f6ba52 10px,
    #ffd180 10px,
    #ffd180 20px
  );
}

.stripe-7 {
  color: white;
  background: repeating-radial-gradient(
    circle,
    purple,
    purple 10px,
    #4b026f 10px, 
    #4b026f 20px
  );
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................