css表盘刻度

画表盘刻度有如下思路

1. 刻度使用真实节点矩形实现(节点多)

若配合投影，可以减少至1/4的节点。

1.1 若节点定位在0点，则旋转源点必须是圆心，用transform-origin带上半径处理

.g-item {
    left: 0;
    top: 0;
    transform-origin: 0 150px;
}
@for $i from 1 through 60 { 
    .g-item:nth-child(#{$i}) {
        transform: rotate(#{($i - 1) * 6deg});
    }
}

1.2 若节点定位在圆心，则transform需要加上额外的translateY将刻度拉到圆的边缘上

.g-item {
    left: 0;
    top: 100%;
}
@for $i from 1 through 60 { 
    .g-item:nth-child(#{$i}) {
        transform: rotate(#{($i - 1) * 6deg}) translateY(-150px);
    }
}

2. 刻度渐变模拟实现(单个节点)

 

 

 

参考：https://juejin.cn/post/7094081111369711629