title: How can I make a circular sector using CSS
body: <p>I want to make a circular sector using CSS. The sectors will form a complete circle. How can I make it using CSS?</p>
  
  <p>I found a <a href="http://jsfiddle.net/nchtG/" rel="nofollow noreferrer">sample</a>, but it makes a quarter circular sector. I want to make six circular sectors that make a complete circle. How can I make it?</p>
  
  <p>Note: I am not good at drawing, but here's a sample of what I want...</p>
  
  <p><img src="https://i.stack.imgur.com/5ZFXR.png" alt="circle devided in sectors "></p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>div {
    width: 50px;
    height: 50px;
    background-color: #ccc;
    background-color: #ccc;
    -moz-border-radius: 100px;
    border-radius: 100px;
  }
  #center {
    position: relative;
    margin: 100px 0 0 100px;
    border: solid #fff 1px;
  }
  #tl,#tr,#bl,#br {
    position: absolute;
    height: 75px;
    width: 75px;
    z-index: -1;
  }
  #tl {
    border-radius: 100px 0 0 0;
    -moz-border-radius: 100px 0 0 0;
    top: -50px;
    left: -50px;
  }
  #tr {
    border-radius: 0 100px 0 0;
    -moz-border-radius: 0 100px 0 0;
    top: -50px;
    left: 26px;
  }
  #bl {
    border-radius: 0 0 0 100px;
    -moz-border-radius: 0 0 0 100px;
    top: 26px;
    left: -50px;
  }
  #br {
    border-radius: 0 0 100px 0;
    -moz-border-radius: 0 0 100px 0;
    top: 26px;
    left: 26px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="center"&gt;
    &lt;div id="tl"&gt;&lt;/div&gt;
    &lt;div id="tr"&gt;&lt;/div&gt;
    &lt;div id="bl"&gt;&lt;/div&gt;
    &lt;div id="br"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>