2

Gostaria de fazer 3 icones em CSS, porém não quero fazer com vários div, com div filhos, etc.

Gostaria algo clean, como

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

Consegui fazendo com vários div (um para borda) e um div para cada círculo, no caso ficou até com 4 divs, para fazer o Status=3.

No JsFiddler como eu fiz https://jsfiddle.net/dorathoto/rchdwy1f/11/

Meu código:

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

Resultado final: Status=1 Status1 Status=2 inserir a descrição da imagem aqui Status=3 Status3

1 Resposta 1

4

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>

4
  • 1
    Basicamente essa técnica: pt.stackoverflow.com/questions/101323
    – Largato
    Commented 11/02/2019 às 18:03
  • @Bacco essa pergunta é um clássico ;)
    – hugocsl
    Commented 11/02/2019 às 18:16
  • 1
    No IE aqui ficou da forma que coloquei na resposta. :(
    – Sam
    Commented 11/02/2019 às 18:27
  • @Sam ai renderizou na tela bem feio mesmo... não sei dizer pq... mas no geral gradiente não denderiza bem no browser mesmo, principalmente na diagonal e em círculos, por isso eu deixei 1px de "transição" na cor do gradiente entre uma cor e outra
    – hugocsl
    Commented 11/02/2019 às 18:29

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .