<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>
.module {
background: white;
border: 1px solid #ccc;
margin: 3%;
> h2 {
padding: 1rem;
margin: 0 0 0.5rem 0;
}
> p {
padding: 0 1rem;
}
}
.stripe-7 {
color: white;
background: repeating-radial-gradient(
circle,
purple,
purple 10px,
#4b026f 10px,
#4b026f 20px
);
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.