Skip to main content
1 de 2
hugocsl
  • 66,9mil
  • 17
  • 88
  • 166

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

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);
}
<div class="bolaCinza"></div>
<div class="bolaAzul"></div>
<div class="bolaRed"></div>

hugocsl
  • 66,9mil
  • 17
  • 88
  • 166