如何用纯CSS正确定位环形图的圆角端点？

问题根源分析 #

你的伪元素位置偏移主要来自三个核心问题：

• 角度坐标系不匹配：conic-gradient默认从顶部（12点钟方向）开始顺时针绘制，但CSS的cos()/sin()函数以x轴正方向（3点钟方向）为0度起点，导致角度计算整体偏移90度。
• 半径计算错误：原代码中半径减去了完整的--thickness，但端点应该落在环形的中线上，需要减去--thickness/2才能和填充弧的边缘对齐。
• 定位偏移未完全居中：原left计算中混用了-7px，应该统一使用-6px（12px宽高的一半）保证伪元素完全居中在目标点上。

修改后的核心CSS代码 #

.circular {
    &__graph {
        grid-area: b;
        max-width: 100%;
        width: 100%;
        margin-top: 36px;
        justify-content: center;
        display: flex;
        flex-direction: column;
        padding-left: 65px;

        &-chart{
            display: flex;
            width: 100%;
            height: 500px;
        } 
    }

    &__circles{
        display: flex;
        align-content: center;
        justify-content: center;
        align-items: center;
        position: relative;
        width: 100%;
    }

    &__dial-circle {
        --size: 320px;
        --thickness: 12px;
        width: var(--size);
        height: var(--size);
        border-radius: 50%; /* 修正为标准正圆 */
        background: conic-gradient(var(--color, #1e90ff) calc(var(--value)* 1%), #F9F9F9 0);
        mask: radial-gradient(farthest-side, transparent calc(100% - var(--thickness)), white calc(100% - var(--thickness) + 1px));
        position: absolute;

        &::before, &::after {
            content: '';
            width: 12px;
            height: 12px;
            position: absolute;
            background: var(--color, #1e90ff);
            border-radius: 50%;
        }

        &::before {
            /* 起点定位在环形顶部中线 */
            left: calc(50% - 6px);
            top: calc(50% - (var(--size)/2) + (var(--thickness)/2) - 6px);
        }

        &::after{
            border: 1px solid red;
            /* 修正角度：减去90度转换为弧度，匹配conic-gradient起点 */
            --angle: calc((var(--value) * 3.6 - 90) * (pi / 180));
            /* 修正半径：取环形中线的半径 */
            --radius: calc((var(--size) / 2) - (var(--thickness) / 2));

            left: calc(50% + var(--radius) * cos(var(--angle)) - 6px);
            top: calc(50% + var(--radius) * sin(var(--angle)) - 6px);
        }
    }
}

关键修改说明 #

1. 标准正圆修正：将border-radius: 60%改为50%，确保环形是完美圆形，避免绘制时的偏移。
2. 起点精准定位：重新计算::before的top值，让起点正好落在环形的顶部中线上，而非容器边缘。
3. 角度坐标系对齐：通过--value * 3.6 - 90将三角函数的角度起点调整为和conic-gradient一致的顶部方向。
4. 中线半径计算：使用--thickness/2替代完整厚度值，让端点完全贴合填充弧的边缘。

修改后，带红色边框的::after伪元素会精准对齐填充弧的末端，和环形边缘完全匹配。

内容的提问来源于stack exchange，提问作者JonJonCS