看过《css揭秘》的同学都知道,我们可以使用线性渐变轻松画出如下颜色条纹:

<div></div>
<style>
div{
    width: 200px;
    height: 50px;
    background-image: linear-gradient(90deg,red 33%,green 33%,green 67%,blue 67%);
}
</style>

根据 background 相关属性,我们可以改变条纹的位置和大小,比如下面 5 个图形:
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<style>
body{
    display: flex;
}
div{
    width: 100px;
    height: 190px;
    margin: 5px;
    background-color: black;
    background-repeat: no-repeat;
}
div:nth-child(1){
    background-image: linear-gradient(90deg,transparent 10px,red 10px,red 90px,transparent 90px);
    background-position: 0 0;
    background-size: 100px 10px;
}
div:nth-child(2){
    background-image: linear-gradient(90deg,red 10px,transparent 10px,transparent 90px,red 90px);
    background-position: 0 10px;
    background-size: 100px 80px;
}
div:nth-child(3){
    background-image: linear-gradient(90deg,transparent 10px,red 10px,red 90px,transparent 90px);
    background-position: 0 90px;
    background-size: 100px 10px;
}
div:nth-child(4){
    background-image: linear-gradient(90deg,red 10px,transparent 10px,transparent 90px,red 90px);
    background-position: 0 100px;
    background-size: 100px 80px;
}
div:nth-child(5){
    background-image: linear-gradient(90deg,transparent 10px,red 10px,red 90px,transparent 90px);
    background-position: 0 180px;
    background-size: 100px 10px;
}
</style>

根据 background 多重背景图片,我们就可以用一个 div 画出数字 8 了:
<div></div>
<style>
div{
    width: 100px;
    height: 190px;
    margin: 5px;
    background-color: black;
    background-repeat: no-repeat;
}
div{
    background-image: 
        linear-gradient(90deg,transparent 10px,red 10px,red 90px,transparent 90px),
        linear-gradient(90deg,red 10px,transparent 10px,transparent 90px,red 90px),
        linear-gradient(90deg,transparent 10px,red 10px,red 90px,transparent 90px),
        linear-gradient(90deg,red 10px,transparent 10px,transparent 90px,red 90px),
        linear-gradient(90deg,transparent 10px,red 10px,red 90px,transparent 90px);

    background-position: 
        0 0,
        0 10px,
        0 90px,
        0 100px,
        0 180px;
    background-size: 
        100px 10px,
        100px 80px,
        100px 10px,
        100px 80px,
        100px 10px;
}
</style>

稍微改改颜色,0-910 个数字都有了:
<select id="select" style="width:100px;">
    <option>0</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
</select>
<div id="target" class="d d0"></div>
<style>
.d{
    width: 100px;
    height: 190px;
    margin: 5px;
    background-color: black;
    background-repeat: no-repeat;
    background-position: 
        0 0,
        0 10px,
        0 90px,
        0 100px,
        0 180px;
    background-size: 
        100px 10px,
        100px 80px,
        100px 10px,
        100px 80px,
        100px 10px;
}
.d0{
    background-image: 
        linear-gradient(90deg,transparent 10px,red 10px,red 90px,transparent 90px),
        linear-gradient(90deg,red 10px,transparent 10px,transparent 90px,red 90px),
        linear-gradient(90deg,transparent 10px,#222 10px,#222 90px,transparent 90px),
        linear-gradient(90deg,red 10px,transparent 10px,transparent 90px,red 90px),
        linear-gradient(90deg,transparent 10px,red 10px,red 90px,transparent 90px);
}
.d1{
    background-image: 
        linear-gradient(90deg,transparent 10px,#222 10px,#222 90px,transparent 90px),
        linear-gradient(90deg,#222 10px,transparent 10px,transparent 90px,red 90px),
        linear-gradient(90deg,transparent 10px,#222 10px,#222 90px,transparent 90px),
        linear-gradient(90deg,#222 10px,transparent 10px,transparent 90px,red 90px),
        linear-gradient(90deg,transparent 10px,#222 10px,#222 90px,transparent 90px);
}
.d2{
    background-image: 
        linear-gradient(90deg,transparent 10px,red 10px,red 90px,transparent 90px),
        linear-gradient(90deg,#222 10px,transparent 10px,transparent 90px,red 90px),
        linear-gradient(90deg,transparent 10px,red 10px,red 90px,transparent 90px),
        linear-gradient(90deg,red 10px,transparent 10px,transparent 90px,#222 90px),
        linear-gradient(90deg,transparent 10px,red 10px,red 90px,transparent 90px);
}
.d3{
    background-image: 
        linear-gradient(90deg,transparent 10px,red 10px,red 90px,transparent 90px),
        linear-gradient(90deg,#222 10px,transparent 10px,transparent 90px,red 90px),
        linear-gradient(90deg,transparent 10px,red 10px,red 90px,transparent 90px),
        linear-gradient(90deg,#222 10px,transparent 10px,transparent 90px,red 90px),
        linear-gradient(90deg,transparent 10px,red 10px,red 90px,transparent 90px);
}
.d4{
    background-image: 
        linear-gradient(90deg,transparent 10px,#222 10px,#222 90px,transparent 90px),
        linear-gradient(90deg,red 10px,transparent 10px,transparent 90px,red 90px),
        linear-gradient(90deg,transparent 10px,red 10px,red 90px,transparent 90px),
        linear-gradient(90deg,#222 10px,transparent 10px,transparent 90px,red 90px),
        linear-gradient(90deg,transparent 10px,#222 10px,#222 90px,transparent 90px);
}
.d5{
    background-image: 
        linear-gradient(90deg,transparent 10px,red 10px,red 90px,transparent 90px),
        linear-gradient(90deg,red 10px,transparent 10px,transparent 90px,#222 90px),
        linear-gradient(90deg,transparent 10px,red 10px,red 90px,transparent 90px),
        linear-gradient(90deg,#222 10px,transparent 10px,transparent 90px,red 90px),
        linear-gradient(90deg,transparent 10px,red 10px,red 90px,transparent 90px);
}
.d6{
    background-image: 
        linear-gradient(90deg,transparent 10px,red 10px,red 90px,transparent 90px),
        linear-gradient(90deg,red 10px,transparent 10px,transparent 90px,#222 90px),
        linear-gradient(90deg,transparent 10px,red 10px,red 90px,transparent 90px),
        linear-gradient(90deg,red 10px,transparent 10px,transparent 90px,red 90px),
        linear-gradient(90deg,transparent 10px,red 10px,red 90px,transparent 90px);
}
.d7{
    background-image: 
        linear-gradient(90deg,transparent 10px,red 10px,red 90px,transparent 90px),
        linear-gradient(90deg,#222 10px,transparent 10px,transparent 90px,red 90px),
        linear-gradient(90deg,transparent 10px,#222 10px,#222 90px,transparent 90px),
        linear-gradient(90deg,#222 10px,transparent 10px,transparent 90px,red 90px),
        linear-gradient(90deg,transparent 10px,#222 10px,#222 90px,transparent 90px);
}
.d8{
    background-image: 
        linear-gradient(90deg,transparent 10px,red 10px,red 90px,transparent 90px),
        linear-gradient(90deg,red 10px,transparent 10px,transparent 90px,red 90px),
        linear-gradient(90deg,transparent 10px,red 10px,red 90px,transparent 90px),
        linear-gradient(90deg,red 10px,transparent 10px,transparent 90px,red 90px),
        linear-gradient(90deg,transparent 10px,red 10px,red 90px,transparent 90px);
}
.d9{
    background-image: 
        linear-gradient(90deg,transparent 10px,red 10px,red 90px,transparent 90px),
        linear-gradient(90deg,red 10px,transparent 10px,transparent 90px,red 90px),
        linear-gradient(90deg,transparent 10px,red 10px,red 90px,transparent 90px),
        linear-gradient(90deg,#222 10px,transparent 10px,transparent 90px,red 90px),
        linear-gradient(90deg,transparent 10px,red 10px,red 90px,transparent 90px);
}
</style>
<script>
select.onchange = function() {
    target.className = 'd d' + this.value
}
</script>

再搞个冒号图形:
<div class="c"></div>
<style>
.c{
    width: 10px;
    height: 190px;
    margin: 5px;
    background-color: black;
    background-image: 
        linear-gradient(90deg, red 10px, transparent 10px),
        linear-gradient(90deg, red 10px, transparent 10px);

    background-position: 0 65px,0 125px;
    background-repeat: no-repeat;
    background-size: 10px 10px,10px 10px;
}
</style>

最后,数字时钟的实现:
<div id="container">
    <span class="d"></span>
    <span class="d"></span>
    <span class="c"></span>
    <span class="d"></span>
    <span class="d"></span>
    <span class="c"></span>
    <span class="d"></span>
    <span class="d"></span>
</div>
<style>
body{
    background:black;
    display: flex;
    justify-content: center;
    align-items: center;
}

#container{
    display: flex;
}
.c{
    width: 10px;
    height: 190px;
    margin: 5px;
    background-color: black;
    background-image: 
        linear-gradient(90deg, #222 10px, transparent 10px),
        linear-gradient(90deg, #222 10px, transparent 10px);

    background-position: 0 65px,0 125px;
    background-repeat: no-repeat;
    background-size: 10px 10px,10px 10px;
}
.d{
    width: 100px;
    height: 190px;
    margin: 5px;
    background-color: black;
    background-repeat: no-repeat;
    background-position: 
        0 0,
        0 10px,
        0 90px,
        0 100px,
        0 180px;
    background-size: 
        100px 10px,
        100px 80px,
        100px 10px,
        100px 80px,
        100px 10px;
}
.d0{
    background-image: 
        linear-gradient(90deg,transparent 10px,red 10px,red 90px,transparent 90px),
        linear-gradient(90deg,red 10px,transparent 10px,transparent 90px,red 90px),
        linear-gradient(90deg,transparent 10px,#222 10px,#222 90px,transparent 90px),
        linear-gradient(90deg,red 10px,transparent 10px,transparent 90px,red 90px),
        linear-gradient(90deg,transparent 10px,red 10px,red 90px,transparent 90px);
}
.d1{
    background-image: 
        linear-gradient(90deg,transparent 10px,#222 10px,#222 90px,transparent 90px),
        linear-gradient(90deg,#222 10px,transparent 10px,transparent 90px,red 90px),
        linear-gradient(90deg,transparent 10px,#222 10px,#222 90px,transparent 90px),
        linear-gradient(90deg,#222 10px,transparent 10px,transparent 90px,red 90px),
        linear-gradient(90deg,transparent 10px,#222 10px,#222 90px,transparent 90px);
}
.d2{
    background-image: 
        linear-gradient(90deg,transparent 10px,red 10px,red 90px,transparent 90px),
        linear-gradient(90deg,#222 10px,transparent 10px,transparent 90px,red 90px),
        linear-gradient(90deg,transparent 10px,red 10px,red 90px,transparent 90px),
        linear-gradient(90deg,red 10px,transparent 10px,transparent 90px,#222 90px),
        linear-gradient(90deg,transparent 10px,red 10px,red 90px,transparent 90px);
}
.d3{
    background-image: 
        linear-gradient(90deg,transparent 10px,red 10px,red 90px,transparent 90px),
        linear-gradient(90deg,#222 10px,transparent 10px,transparent 90px,red 90px),
        linear-gradient(90deg,transparent 10px,red 10px,red 90px,transparent 90px),
        linear-gradient(90deg,#222 10px,transparent 10px,transparent 90px,red 90px),
        linear-gradient(90deg,transparent 10px,red 10px,red 90px,transparent 90px);
}
.d4{
    background-image: 
        linear-gradient(90deg,transparent 10px,#222 10px,#222 90px,transparent 90px),
        linear-gradient(90deg,red 10px,transparent 10px,transparent 90px,red 90px),
        linear-gradient(90deg,transparent 10px,red 10px,red 90px,transparent 90px),
        linear-gradient(90deg,#222 10px,transparent 10px,transparent 90px,red 90px),
        linear-gradient(90deg,transparent 10px,#222 10px,#222 90px,transparent 90px);
}
.d5{
    background-image: 
        linear-gradient(90deg,transparent 10px,red 10px,red 90px,transparent 90px),
        linear-gradient(90deg,red 10px,transparent 10px,transparent 90px,#222 90px),
        linear-gradient(90deg,transparent 10px,red 10px,red 90px,transparent 90px),
        linear-gradient(90deg,#222 10px,transparent 10px,transparent 90px,red 90px),
        linear-gradient(90deg,transparent 10px,red 10px,red 90px,transparent 90px);
}
.d6{
    background-image: 
        linear-gradient(90deg,transparent 10px,red 10px,red 90px,transparent 90px),
        linear-gradient(90deg,red 10px,transparent 10px,transparent 90px,#222 90px),
        linear-gradient(90deg,transparent 10px,red 10px,red 90px,transparent 90px),
        linear-gradient(90deg,red 10px,transparent 10px,transparent 90px,red 90px),
        linear-gradient(90deg,transparent 10px,red 10px,red 90px,transparent 90px);
}
.d7{
    background-image: 
        linear-gradient(90deg,transparent 10px,red 10px,red 90px,transparent 90px),
        linear-gradient(90deg,#222 10px,transparent 10px,transparent 90px,red 90px),
        linear-gradient(90deg,transparent 10px,#222 10px,#222 90px,transparent 90px),
        linear-gradient(90deg,#222 10px,transparent 10px,transparent 90px,red 90px),
        linear-gradient(90deg,transparent 10px,#222 10px,#222 90px,transparent 90px);
}
.d8{
    background-image: 
        linear-gradient(90deg,transparent 10px,red 10px,red 90px,transparent 90px),
        linear-gradient(90deg,red 10px,transparent 10px,transparent 90px,red 90px),
        linear-gradient(90deg,transparent 10px,red 10px,red 90px,transparent 90px),
        linear-gradient(90deg,red 10px,transparent 10px,transparent 90px,red 90px),
        linear-gradient(90deg,transparent 10px,red 10px,red 90px,transparent 90px);
}
.d9{
    background-image: 
        linear-gradient(90deg,transparent 10px,red 10px,red 90px,transparent 90px),
        linear-gradient(90deg,red 10px,transparent 10px,transparent 90px,red 90px),
        linear-gradient(90deg,transparent 10px,red 10px,red 90px,transparent 90px),
        linear-gradient(90deg,#222 10px,transparent 10px,transparent 90px,red 90px),
        linear-gradient(90deg,transparent 10px,red 10px,red 90px,transparent 90px);
}
</style>
<script>
    var digits = container.querySelectorAll('.d')
    var padZero = function(n) {
        if (n.toString().length == 1) {
            n = "0" + n;
        }
        return n
    }
    var show = function() {
        var date = new Date()
        var string = '' + padZero(date.getHours()) + padZero(date.getMinutes()) + padZero(date.getSeconds());
        [].forEach.call(digits, function(n, i) {
            n.className = 'd d' + string[i]
        })
    }
    setInterval(show, 1000)
    show()
</script>