uniapp h5加css无图片实现刻度表

	<view class="content">
		<view class="semicircle">
			<view class="pointer" :style="'transform: translateX(-50%) rotate('+-60+'deg);'">
				<view class="pointer-top"></view>
				<view class="pointer-bottom"></view>
			</view>
			<view class="scale" v-for="(e,i) in 51" :key="'scale'+e"
				:style="'transform: translateX(-50%) rotate('+(-60+i*2.4)+'deg);'">
				<view class="scale-item" :class="i%10==0?'scale-item1':''"></view>
			</view>
			<view class="border" v-for="(e,i) in 51" :key="'border'+e"
				:style="'transform: translateX(-50%) rotate('+(-60+i*2.4)+'deg);'">
				<view class="border-item" :class="i==0?'border-item-first':(i==50?'border-item-end':'')"></view>
			</view>
			<view class="num" v-for="(e,i) in 6" :key="'num'+e"
				:style="'transform: translateX(-50%) rotate('+(-60+i*24)+'deg);'">
				<view class="num-item">{{12*i}}</view>
			</view>
		</view>
	</view>
</template>
 
<style scoped lang="scss">
	.content {
		width: 100%;
 
		.semicircle {
			width: 100%;
			height: calc((100vw - 42px) * 0.4);
			border-top-right-radius: calc((100vw - 42px) * 0.4);
			border-top-left-radius: calc((100vw - 42px) * 0.4);
			box-shadow: inset 0px 30px 15px -20px rgba(78, 167, 254, .8);
			position: relative;
			// -webkit-clip-path: polygon(20% 100%, 0% 80%, 0% 0%, 100% 0%, 100% 80%, 80% 100%);
 
			.pointer {
				position: absolute;
				bottom: 0;
				left: 50%;
				height: 67%;
				transform-origin: center bottom;
				display: flex;
				flex-direction: column;
				align-items: center;
 
				.pointer-top {
					width: 0;
					height: 0;
					border-left: 5px solid transparent;
					border-right: 5px solid transparent;
					border-bottom: 10px solid white;
				}
 
				.pointer-bottom {
					flex: 1;
					width: 3px;
					background-color: white;
				}
			}
 
			.scale,
			.border,
			.num {
				width: 2px;
				height: 77%;
				position: absolute;
				bottom: 0;
				left: 50%;
				transform-origin: center bottom;
				display: flex;
				justify-content: center;
 
				.scale-item,
				.border-item {
					width: 50%;
					height: 5px;
					background-color: #42E0FF;
					margin-top: 2px;
				}
 
				.scale-item1 {
					width: 100%;
					margin-top: 0px;
					padding-top: 2px;
				}
			}
 
			.border {
				width: 6px;
 
				.border-item {
					width: 100%;
					height: 1px;
					margin-top: 7px;
				}
 
				.border-item-first {
					width: 50%;
					margin-left: 1px;
				}
 
				.border-item-end {
					width: 50%;
					margin-right: 1px;
				}
			}
 
			.num {
				width: unset;
				height: 90%;
 
				.num-item {
					width: 100%;
					height: 1px;
					margin-top: 0;
					font-size: 12px;
				}
			}
		}
	}
</style>

效果图