关于前端如何用原生实现刻度尺

刻度线主要通过 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>

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