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