刻度线主要通过 background中的 linear-gradient来实现，因为在demo中使用了一部分cm，mm做单位，可能存在误差
先上代码：

<div class="ruler"><div class="scal-line"><div class="exactly-ten"></div><div class="scal-txt" id="txt"></div></div>
</div>

.ruler {width: 12cm;height: 4cm;background-color: #f1f1f1;margin: 100px auto;border-radius: 5px;
}
.ruler .scal-line {position: relative;width: 10cm;height: 4mm;margin: 0 auto;background: linear-gradient(90deg, transparent 37%, #bbb 63%, transparent 63%);background-repeat: repeat-x;background-size: 1mm 2cm;background-position: 0 0;
}.ruler .scal-line .exactly-ten {position: absolute;left: 0;top: 0;width: 10.05cm;height: 6mm;background: linear-gradient(90deg, transparent 47%, #aaa 53%, transparent 53%);background-repeat: repeat-x;background-size: 1cm 4.5cm;background-position: -0.45cm 0;
}.ruler .scal-line .scal-txt .num {display: inline-block;width: 1cm;height: 1cm;padding-top: 1cm;text-align: center;
}.ruler .scal-line .scal-txt .zero-num {display: inline-block;width: .5cm;height: 1cm;padding-top: 1cm;
}.ruler .scal-line .scal-txt .full-num {
display: inline-block;width: .5cm;height: 1cm;padding-top: 1cm;text-align: right;
}

js主要用来显示刻度数字的。

<script>let str = ''for (let i = 1; i < 10; i++) {str = str + `<span class="num">${i}</span>`}let allTxt = '<span class="zero-num">0</span>' +str + '<span class="full-num">10</span>'document.getElementById('txt').innerHTML = allTxt
</script>

如有错误，欢迎指正，谢谢！
以上内容仅供参考，欢迎大家讨论。