纯CSS绘制一组阿拉伯数字实例页面

CSS代码：

/* by zhangxinxu(.com)，可免费商用，保留此注释即可 */
.num {
    display: inline-block;
    line-height: 1;
    -webkit-text-fill-color: transparent;
    font-family: system-ui;
    font-weight: bold;
    position: relative;
    overflow: hidden;
}
.num:empty::after {
    content: '0';
}
.num::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: currentColor;
}
.num0::before {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 60% 100%, 60% 20%, 40% 20%, 40% 80%, calc(60% - .01px) 80%, calc(60% - .01px) 100%, 0% 100%);
}
.num1 {
    text-indent: -.25em;
}
.num2::before,
.num5::before {
    clip-path: polygon(0 0, 100% 0, 100% 60%, 50% 60%, 50% 80%, 100% 80%, 100% 100%, 0 100%, 0% 40%, 50% 40%, 50% 20%, 0% 20%);
}
.num3::before {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%, 0% 80%, 50% 80%, 50% 60%, 0% 60%, 0% 40%, 50% 40%, 50% 20%, 0% 20%);
}
.num4::before {
    clip-path: polygon(0 0, 40% 0, 40% 50%, calc(100% - 40%) 50%, calc(100% - 40%) 0%, 100% 0%, 100% 100%, calc(100% - 40%) 100%, calc(100% - 40%) 70%, 0% 70%);
}
.num5::before {
    transform: scaleX(-1);
}
.num6::before,
.num9::before {
    clip-path: polygon(0% 0%, 100% 0%, 100% 20%, calc(40% - .01px) 20%, calc(40% - .01px) 80%, calc(100% - 40%) 80%, calc(100% - 40%) 60%, 40% 60%, 40% 40%, 100% 40%, 100% 100%, 0% 100%);
}
.num7::before {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 50% 100%, 50% 20%, 0% 20%);
}
.num8::before {
    clip-path: polygon(0% 0%, calc(40% - .01px) 0%, calc(40% - .01px) 40%, 60% 40%, 60% 20%, 40% 20%, 40% 0%, 100% 0%, 100% 100%, 40% 100%, 40% 80%, 60% 80%, 60% 60%, calc(40% - .01px) 60%, calc(40% - .01px) 100%, 0% 100%);
}
.num9::before {
    transform: scale(-1);
}

@supports not (inset: 0) {
    .num::before {
        left: 0; right: 0; top: 0; bottom: 0;
    }
}

HTML代码：

<span class="num num0">0</span>
<span class="num num1">1</span>
<span class="num num2">2</span>
<span class="num num3">3</span>
<span class="num num4">4</span>
<span class="num num5">5</span>
<span class="num num6">6</span>
<span class="num num7">7</span>
<span class="num num8">8</span>
<span class="num num9">9</span>