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>