title: Multiple buttons to one circle
body: <p><a href="https://i.stack.imgur.com/NyHXu.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NyHXu.png" alt="Gear Screenshot"></a></p>
  
  <p>I want to create a circle with distances with my 6 buttons. In the image you can see the result of my try but it doesn't look like a circle. I circled my problems with red. Below you can have a look on my HTML and CSS code. </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-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;Title&lt;/title&gt;
      &lt;style&gt;
       .container {
  margin-top: 360px;
  margin-bottom: 16px;
  padding-left: 30px;
  padding-right: 30px;
  }
  
       .top-left {
       margin-top: -260px;
       margin-left: -20px;
       border-radius: 40px / 100px;
       border-top-right-radius: 0;
       border-bottom-right-radius: 0;
       border-bottom-left-radius: 0;
       position: absolute;
      }
      
      .top-right {
       margin-top: -260px;
       margin-left: 155px;
       border-radius: 40px / 100px;
       border-bottom-left-radius: 0;
       border-top-left-radius: 0;
       border-bottom-right-radius: 0;
       position: absolute;
      }
      
      .bottom-left {
       margin-top: -160px;
       margin-left: -20px;
       border-radius: 40px / 100px;
       border-top-right-radius: 0;
       border-top-left-radius: 0;
       border-bottom-right-radius: 0;
       position: absolute;
      }
      
      .bottom-right {
       margin-top: -160px;
       margin-left: 155px;
       border-radius: 40px / 100px;
       border-top-right-radius: 0;
       border-top-left-radius: 0;
       border-bottom-left-radius: 0;
       position: absolute;
      }
      
      .top-center{
       border-radius: 440px / 220px;
       border-bottom-left-radius: 0;
       border-bottom-right-radius: 0;
       width: 270px!important;
       height: 70px!important;
       margin-top: -334px;
       margin-left: 15px;
       position: absolute;
      }
      
      .top-center p {
       padding: 0px 40px 0px 40px;
      }
      
      .bottom-center{
       border-radius: 440px / 220px;
       border-top-left-radius: 0;
       border-top-right-radius: 0;
       width: 270px!important;
       height: 70px!important;
       margin-top: -64px;
       margin-left: 15px;
       position: absolute;
      }
      
      .bottom-center p {
       padding: 0px 40px 0px 40px;
      }
      
      .div-button {
       width: 168px;
       height: 92px;
       border: 2px solid rgba(77,207,255,1);
       background-color: transparent;
          color: rgba(77,207,255,1);
          font-size: 25px;
          text-align: center;
       vertical-align: middle;
       line-height: 100px;
       transition: all .3s linear;
      }
      
      .div-button p{
       margin-top: -10px!important;
       text-overflow: ellipsis;
       white-space: nowrap;
         overflow: hidden;
      }
      
      .button-selected {
       transform: scale(0.8);
       border: none;
       background-color: rgba(77,207,255,1);
       color: black;
      }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div class="container"&gt;
   &lt;div class="div-button top-center" id="top-center"&gt;
    &lt;p&gt;Text&lt;/p&gt;
   &lt;/div&gt;
   &lt;div class="div-button top-left" id="top-left"&gt;
    &lt;p&gt;Text&lt;/p&gt;
   &lt;/div&gt;
   &lt;div class="div-button top-right" id="top-right"&gt;
    &lt;p&gt;Text&lt;/p&gt;
   &lt;/div&gt;
   &lt;div class="div-button bottom-left" id="bottom-left"&gt;
    &lt;p&gt;Text&lt;/p&gt;
   &lt;/div&gt;
   &lt;div class="div-button bottom-right" id="bottom-right"&gt;
    &lt;p&gt;Text&lt;/p&gt;
   &lt;/div&gt;
   &lt;div class="div-button bottom-center" id="bottom-center"&gt;
    &lt;p&gt;Text&lt;/p&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>