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 1 bola tem 1 `radial-gradiente` no `background-image`, a que tem 2 bolas tem 2 `radial`, e a que tem 3 bolas vai ter 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... Link com a documentação da Mozilla sobre `radial-gradiente`: https://developer.mozilla.org/pt-BR/docs/Web/CSS/radial-gradient

<!-- 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 -->