Skip to main content
inclui novas instruções
Fonte Link
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 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>

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>

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

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>

Fonte Link
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>