How to draw 3 CSS circles with 1 div

Question

I would like to do 3 icones in CSS, but I don’t want to do with several div, div filhos, etc.

I’d like something clean, like

<div class="Status1"></div>
<div class="Status2"></div>
<div class="Status3"></div>

I managed doing with several div (one for edge) and a div for each circle, in the case stayed up with 4 Divs, to make the Status=3.

On Jsfiddler like I did https://jsfiddle.net/dorathoto/rchdwy1f/11/

My code:

<div class="quadrado">
  <div class="bolaCinza"> </div>
  <div class="bolaAzul"> </div>
  <div class="bolaRed"> </div>
</div>

Final result: Status=1 Status=2 Status=3

Answer 1

There may be other ways to do it, but the simplest I found was using a sequence of 3 radial-gradient.

Notice I have only one div, however the div that has 1 ball has 1 radial-gradiente in the background-image, the one with 2 balls has 2 balls radial, and the one with 3 balls will have 3 radial-gradiente within the background-image.

It is simple to configure within the gradient vc itself against the X/Y to position the balls and colors... Link with the Mozilla documentation on radial-gradiente: https://developer.mozilla.org/en-US/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>