title: Circular Navigation with CSS and HTML
body: <p>I need to make a circular navigation menu similar to the link below, shape-wise. I need to have six buttons on mine. The issue is, I need to do this using only CSS and HTML. I have made various attempts at this, but I am at a lost as to how to achieve it. I have tried it with transforms, absolute positioning, and other ways... but I'm not getting decent results. If someone could help me design the buttons, I would greatly appreciate it. I have included my container divs for reference.</p>
  
  <p><a href="http://jsfiddle.net/jcubed111/xSajL/" rel="nofollow noreferrer">Example Similar Shape</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.circle-main {
    background-color: rgba(255, 190, 0, 1.00);
    border-radius: 50%;
    height: 400px;
    margin: 0 auto;
    width: 400px;
  }
  
  .circle-center {
    background-color: rgba(255, 255, 255, 1.00);
    border-radius: 50%;
    height: 250px;
    margin: 75px auto 0px 75px;
    position: absolute;
    width: 250px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="circle-container"&gt;
    &lt;div class="circle-main"&gt;
      &lt;div class="circle-center"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>