html5借用repeating-linear-gradient实现一把刻度尺（r

background-image: repeating-linear-gradient(90deg, red 0, red 50px, blue 0, blue 200px);

.ruler {
  width: 16cm;
  height: 3cm;
  border: 1px solid $color-border;
}

background-image: repeating-linear-gradient(90deg, $color-main 0, $color-main 5px, transparent 0, transparent 1cm);

background-position: .5cm 0;
background-repeat: no-repeat;

width: calc(16cm + 5px);

background-size: 100% 30px;

background-position: .5cm 100%;

background-image: "厘米刻度背景", repeating-linear-gradient(90deg, $color-main 0, $color-main 2px, transparent 0, transparent .5cm);
background-size: "厘米刻度大小", 100% 20px; // 高度为20px

background-size: "厘米刻度大小", calc(100% - 1cm) 20px;

background-position: "厘米刻度位置", (.5cm + 1.5px) 100%;

background-image: "厘米刻度背景", "半厘米刻度背景", repeating-linear-gradient(90deg, $color-main 0, $color-main 1px, transparent 0, transparent .1cm);
background-size: "厘米刻度大小", "半厘米刻度大小", calc(100% - 1.2cm) 10px; // 高度为10px
background-position: "厘米刻度位置", "半厘米刻度位置", calc(.5cm + 2px) 100%; // 裁剪背景

<div class="ruler">
  <span>0-15</span>
</div>

.ruler {
  display: flex;
  justify-content: space-between;
  
  span {
    flex: 1;
    margin-: 55px;
    text-align: center;  
  }
}