<div class="metric">one</div>
<div class="metric">two</div>
<div class="metric">three</div>
.metric{
width: auto;
height: 40mm;
padding: 10mm;
position: relative;
}
.metric:before, .metric:after{
content: '';
position: absolute;
z-index: -1;
width: 100%;
top: 0;
left: 0;
}
.metric:before{
background: repeating-linear-gradient(90deg, transparent, transparent 1.5mm, #000 1.5mm, #000 2mm);
height: 3mm;
}
.metric:after{
background: repeating-linear-gradient(90deg, transparent, transparent 9.5mm, #f00 9.5mm, #f00 10mm);
height: 8mm;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.