背景

最近看到咸鱼老师（个人称呼）总结一些用flex做css layout的用法，其中就有做环状图。我对css挺感兴趣的，尤其是觉得环状图在平时使用颇多，就大概试了一下。其实挺惭愧，因为我发现我没法理解他的写法。对于环状图，我突然觉得如果用遮罩应该会简单不少√

注

写文章只是为了日后提醒自己√毕竟只是小白

正文

以45%为例子。

<div style="
    position: relative;">

        <!-- Show number of percentages -->
        <div style="
        align-items: center;
        display: flex;
        justify-content: center;

        border: 12px solid #333;
        border-radius: 9999px;

        height: 128px;
        width: 128px;">
            45%
        </div>

        <!-- 进度条 -->
        <div style="
        left: 0;
        position: absolute;
        top: 0;

        border: 12px solid rgba(236, 30, 30, 1);
        height: 128px;
        width: 128px;
        border-radius: 50%;

        clip: rect(0px, 152px, 154px, 76px);
        "></div>

        <!-- 遮罩层 -->
        <div style="
        /* Take full size */
        height: 128px;
        position: absolute;
        width: 128px;
        top: 0;
        left: 0;

        border: 12px solid #333;
        border-radius: 9999px;
        z-index: 100;
       
        clip: rect(0px, 152px, 154px, 76px);
        transform: rotate(162deg);
        "></div>

    </div>

点击这里查看原文。