User:Evesiesta/沙盒/25/style.css

注意：保存之后，你必须清除浏览器缓存才能看到做出的更改。Google Chrome、Firefox、Microsoft Edge及Safari：按住⇧ Shift键并单击工具栏的“刷新”按钮。参阅Help:绕过浏览器缓存以获取更多帮助。

.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;
    }
}