Как построить дугу из div-блоков?

for (var i = 1; i < 10; i++) 
  document.body.innerHTML += `<div style=" 
      transform: rotate(${i*20-100}deg); 
      top: ${110+Math.sin(i/Math.PI-Math.PI)*100}px; 
      left: ${300+Math.cos(i/Math.PI-Math.PI)*100}px" 
  >${i}</div>`

div{ 
  position: absolute; 
  height: 20px; 
  width: 20px; 
  border: solid; 
  text-align: center; 
}