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][1]][1] Gerar as várias barras fazendo a inclinação pela ponta de baixo: [![inserir a descrição da imagem aqui][2]][2] 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:** <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-js --> $(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); } }) <!-- language: lang-css --> 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%; } <!-- language: lang-html --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="circle"> </div> <!-- end snippet --> [1]: https://i.sstatic.net/bXDRr.png [2]: https://i.sstatic.net/1MNCm.png