<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;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.