<div class="module">
<h2 class="stripe-2">Gradient 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>
.module {
background: white;
border: 1px solid #ccc;
margin: 3%;
> h2 {
padding: 1rem;
margin: 0 0 0.5rem 0;
}
> p {
padding: 0 1rem;
}
}
.stripe-2 {
color: black;
background: repeating-linear-gradient(
45deg,
transparent,
transparent 10px,
#ccc 10px,
#ccc 20px
),
linear-gradient(
to bottom,
#eee,
#999
)
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.