title: How to divide a circle into 12 equal parts with color using css3/javascript
body: <p>HTML:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;Circle&lt;/title&gt;
      &lt;link rel="stylesheet" href="stylesheet.css" type="text/css" /&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div class="circle"&gt;&lt;p class="innerCircle"&gt;&lt;/p&gt;&lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.circle {
      width: 450px;
      height: 450px;
  
      border-top: 30px solid #416fa6;
      border-right: 30px solid #718242;
      border-bottom: 30px solid #63ae98;
      border-left: 30px solid #b45447;
      -webkit-border-radius: 300px;
         -moz-border-radius: 300px;
              border-radius: 300px;
  }
  .innerCircle {
      width: 0px;
      height: 0px;
      border-top: 210px solid #416FA6;
      border-left: 210px solid #B45447;
      border-right: 210px solid #718242;
      border-bottom: 210px solid #FFA500;
      -webkit-border-radius: 100%;
         -moz-border-radius: 100%;
              border-radius: 100%;
      margin-left: 15px;
      margin-right:0px;
      margin-top: 15px;
      margin-bottom:0px; 
      /* border-radius: 50%;
      background-color: green; */
  }
  </code></pre>
  
  <p>I want to divide a circle into 12 parts by using lines for <strong>innerCircle</strong> following below figure. I tried few but not fully. So Please give some idea.</p>
  
  <p><img src="https://i.stack.imgur.com/eBTxY.png" alt="enter image description here"></p>
  
  <p>Thanks in advance.</p>