css 锥形渐变实现仪表盘

仪表盘的形状实现:都是圆,未渐变染色的区域都是白色,和背景白色相同,产生形状

效果图:

代码示例:

//背景白色
body {
    
    
    background: #fff;
}

/* 最外围边框 */
.bg {
    
    
    position: relative;
    margin: 50px auto;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: conic-gradient(
        #f1462c 0%,
        #fc5d2c 12.4%,
        #fff 12.5%,
        #fff 12.5%,
        #fc5d2c 12.5%,
        #fba73e 24.9%,
        #fff 24.9%,
        #fff 25%,
        #fba73e 25%,
        #e0fa4e 37.4%,
        #fff 37.4%,
        #fff 37.5%,
        #e0fa4e 37.5%,
        #12dd7e 49.9%,
        #fff 49.9%,
        #fff 50%,
        #12dd7e 50%,
        #0a6e3f 62.4%,
        #fff 62.4%,
        #fff 62.5%
    );
    transform: rotate(-112.5deg);
    transform-origin: 50% 50%;
}

/* 外围和中间仪表的间隔白色,实际就是一个白色圆 */
.bg::before {
    
    
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 370px;
    height: 370px;
    border-radius: 50%;
    background: #fff;
}

//内部仪表盘
.bg::after {
    
    
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 320px;
    height: 320px;
    border-radius: 50%;
    /*径向渐变:内部仪表盘中间白色的区域  */
    background: radial-gradient(
            #fff 0%,
            #fff 25%,
            transparent 25%,
            transparent 100%
        ),
        conic-gradient(
            #f1462c 0 12.5%,
            #fba73e 0 25%,
            #e0fa4e 0 37.5%,
            #12dd7e 0 50%,
            #0a6e3f 0 62.5%,
            #fff 0 100%
        );
}

/* 指针圆 */
.point {
    
    
    position: absolute;
    width: 30px;
    height: 30px;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;
    background: radial-gradient(#467dc6 0%, #a4c6f3 100%);
    border-radius: 50%;
    z-index: 999;
}
/* 指针针 */
.point::before {
    
    
    content: "";
    position: absolute;
    width: 5px;
    height: 350px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(0);
    border-radius: 100% 100% 5% 5%;
    background: linear-gradient(
        180deg,
        #9bc7f6 0,
        #467dc6 50%,
        transparent 50%,
        transparent 100%
    );
    animation: rotate 3s cubic-bezier(.93, 1.32, .89, 1.15) infinite;
}

@keyframes rotate {
    
    
    50% {
    
    
        transform: translate(-50%, -50%) rotate(150deg);
    }
    100% {
    
    
        transform: translate(-50%, -50%) rotate(150deg);
    }
}

<div class="bg">
    <div class="point"></div>
</div>