title: How to draw a circle sector in CSS?
body: <p>Well, drawing a circle with pure CSS is easy.</p>
  
  <pre><code>.circle {
      width: 100px;
      height: 100px;
      border-radius: 100px;
      border: 3px solid black;
      background-color: green;
  }
  </code></pre>
  
  <p>How do I draw a sector? Given a degree X [0-360] I want to draw a X degrees sector.
  Can I do that with pure CSS? </p>
  
  <p>For example:</p>
  
  <p><img src="https://i.stack.imgur.com/Lz1Wb.jpg" alt="enter image description here"></p>
  
  <p><strong>Thanks + Example</strong></p>
  
  <p>Thank you Jonathan, I used the first method. If it helps someone here's an example of a JQuery function that gets percentage and draw a sector. The sector is behind the percentage circle and this example shows how to achieve an arc around a circle from a start degree.  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function drawSector() {
    var activeBorder = $("#activeBorder");
    var prec = activeBorder.children().children().text();
    if (prec &gt; 100)
      prec = 100;
    var deg = prec * 3.6;
    if (deg &lt;= 180) {
      activeBorder.css('background-image', 'linear-gradient(' + (90 + deg) + 'deg, transparent 50%, #A2ECFB 50%),linear-gradient(90deg, #A2ECFB 50%, transparent 50%)');
    } else {
      activeBorder.css('background-image', 'linear-gradient(' + (deg - 90) + 'deg, transparent 50%, #39B4CC 50%),linear-gradient(90deg, #A2ECFB 50%, transparent 50%)');
    }
  
    var startDeg = $("#startDeg").attr("class");
    activeBorder.css('transform', 'rotate(' + startDeg + 'deg)');
    $("#circle").css('transform', 'rotate(' + (-startDeg) + 'deg)');
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
    width: 110px;
    height: 110px;
    margin: 100px auto;
  }
  
  .prec {
    top: 30px;
    position: relative;
    font-size: 30px;
  }
  
  .prec:after {
    content: '%';
  }
  
  .circle {
    position: relative;
    top: 5px;
    left: 5px;
    text-align: center;
    width: 100px;
    height: 100px;
    border-radius: 100%;
    background-color: #E6F4F7;
  }
  
  .active-border {
    position: relative;
    text-align: center;
    width: 110px;
    height: 110px;
    border-radius: 100%;
    background-color: #39B4CC;
    background-image: linear-gradient(91deg, transparent 50%, #A2ECFB 50%), linear-gradient(90deg, #A2ECFB 50%, transparent 50%);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;div class="container"&gt;
    &lt;div id="activeBorder" class="active-border"&gt;
      &lt;div id="circle" class="circle"&gt;
        &lt;span class="prec"&gt;66&lt;/span&gt;
        &lt;span id="startDeg" class="90"&gt;&lt;/span&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong><a href="http://jsfiddle.net/wun8T/1/" rel="noreferrer">JSFiddle demo</a></strong></p>
  
  <pre><code>$(function drawSector() {
      // Get degrees
      ...
      // Draw a sector
      if (deg &lt;= 180) {
          activeBorder.css('background-image', 'linear-gradient(' + (90+deg) + 'deg, transparent 50%, #A2ECFB 50%), linear-gradient(90deg, #A2ECFB 50%, transparent 50%)');
      }
      else {
          activeBorder.css('background-image', 'linear-gradient(' + (deg-90) + 'deg, transparent 50%, #39B4CC 50%), linear-gradient(90deg, #A2ECFB 50%, transparent 50%)');
      }
  
      // Rotate to meet the start degree
      activeBorder.css('transform','rotate(' + startDeg + 'deg)');
  });
  </code></pre>