Skip to main content
3 de 3
removeu 32 caracteres do conteúdo
Sam
  • 80,8mil
  • 22
  • 73
  • 127

Você pode conseguir o efeito usando transform-origin: bottom; e um pseudo-elemento.

Suponhamos que tenha apenas 1 barra no círculo, com altura de metade do raio + 2%, totalizando 52% (os 2% será o excesso que irá ficar fora do círculo) posicionado no meio com a ponta de baixo saindo do centro:

inserir a descrição da imagem aqui

Gerar as várias barras fazendo a inclinação pela ponta de baixo:

inserir a descrição da imagem aqui

Você conseguirá obter o efeito. Porém não use ul nem li para isso. Esses elementos possuem um espaçamento padrão que irá atrapalhar. Mesmo você podendo eliminar esses espaçamentos pelo CSS, é desnecessário. Use div e span, seu código vai ficar muito mais limpo e preciso.

Outro ponto é que você precisará de 128 barras para completar o círculo com a rotação especificada no jQuery.

Veja:

$(function(){
   var rotate = 0;
   for (var i = 0; i <= 128; i++) {
      var li = $('<span>',{class:'bar_'+i});
      li.css('transform','rotate('+rotate+'deg)');
      rotate += 2.8125;
      $('.circle').append(li);
   }
})
div.circle {
   width: 350px;
   height: 350px;
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

div.circle::after {
   content: '';
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
   background-color: #aaa;
    border-radius: 100%;
}

div.circle span {
   position: absolute;
   width: 3px;
   height: 52%;
   background-color: #60f;
   left: 50%;
   margin-left: -1.5px;
   transform-origin: bottom;
   top: -2%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="circle">
</div>

Sam
  • 80,8mil
  • 22
  • 73
  • 127