Pode ser que existam outras formas de fazer, mas a mais simples que eu achei foi usando uma sequência de 3 `radial-gradient`

Repare que eu tenho apenas uma `div`, porém a `div` que tem uma bola tem 1 `radial`, a que tem 2 bolas 2, e 3 bolas 3 `radial-gradiente` dentro do `background-image`

É simples de configura dentro do próprio gradiente vc contra o `X/Y` para posicionar as bolinhas e as cores...

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

    body {
        background-color: black;
    }

    [class^="bola"] {
        width: 44px;
        height: 20px;
        border-radius: 6px;
        background-color: #000;
        border: 1px solid #999;
        background-repeat: no-repeat;
        margin-bottom: 1rem;
    }
    .bolaCinza {
        background-image: radial-gradient(circle at 12px 10px, #fff 0px, #fff 5px, #000 6px);
    }
    .bolaAzul {
        background-image:   radial-gradient(circle at 12px 10px, #fff 0px, #fff 5px, transparent 6px),
                            radial-gradient(circle at 22px 10px, #00f 0px, #00f 5px, #000 6px);
    }
    .bolaRed {
        background-image:   radial-gradient(circle at 12px 10px, #fff 0px, #fff 5px, transparent 6px),
                            radial-gradient(circle at 22px 10px, #00f 0px, #00f 5px, transparent 6px),
                            radial-gradient(circle at 32px 10px, #f00 0px, #f00 5px, #000 6px);
    }

<!-- language: lang-html -->

    <div class="bolaCinza"></div>
    <div class="bolaAzul"></div>
    <div class="bolaRed"></div>

<!-- end snippet -->