title: CSS Semicircle with segments
body: <p>I am trying to create a semicircle with 5 segments, as shown in the image below, where I can easily adjust the spacing between various segments and the size of the segments themselves.</p>
  
  <p>CSS Semicircle Example</p>
  
  <p><a href="https://i.stack.imgur.com/CRCSG.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CRCSG.jpg" alt="enter image description here"></a></p>
  
  <p>I'm very much a novice at frontend development, but I have tried several resources, so as to figure this out on my own before coming here:</p>
  
  <ol>
  <li><a href="https://tympanus.net/codrops/2013/08/09/building-a-circular-navigation-with-css-transforms/" rel="nofollow noreferrer">Building a Circular Navigation with CSS Transforms</a></li>
  <li><a href="https://stackoverflow.com/questions/14184494/segments-in-a-circle-using-css3">Segments in a circle using CSS3</a></li>
  <li>A ton of codepen pens.</li>
  </ol>
  
  <p>I need help with a simple and pure CSS solution that doesn't involve working with a crazy ton of math by way of mixins or rolling a SVG solution. </p>
  
  <p>Any help would be appreciated... I've been at this for 3 days and this is pretty much a last resort. </p>