How to draw a circle sector in CSS with a start and an end position (in deg)
<p>I am trying to create a circle sector. This sector should be built in CSS by with a starting and an end positions measured in degrees. </p>

<p>For example: <code>startPosition: 155deg; endPosition: 245deg;</code></p>

<p><a href="https://i.stack.imgur.com/ErvbB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ErvbB.png" alt="enter image description here"></a></p>

<p>I tried to find answer to this problem here:
<a href="https://stackoverflow.com/questions/21205652/how-to-draw-a-circle-sector-in-css">How to draw a circle sector in CSS?</a></p>

<p>But none of the answers really helped me.</p>

<p>This is my code so far (<a href="http://jsfiddle.net/idoglik6/1mvgnsrc/" rel="nofollow noreferrer">http://jsfiddle.net/idoglik6/1mvgnsrc/</a>):</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.pivot-control {
  float: left;
  position: relative;
}
.pivot-control .pivot-container {
  border-radius: 50%;
  border-style: solid;
  border-width: 3px;
  border-color: #2e3d5d;
  box-sizing: border-box;
  background-color: #bcd0e7;
  width: 76px;
  height: 76px;
}
.pivot-control .pivot-container .pivot-circle {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.pivot-control .pivot-container .pivot-circle .pivot-hand {
  position: relative;
  background: #228ad5;
  height: 38px;
  left: 49%;
  top: 0;
  transform-origin: 50% 100%;
  width: 2px;
  box-shadow: 0 -2px 0 2px #fafafa;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="pivot-control"&gt;
  &lt;div class="pivot-container"&gt;
    &lt;div class="pivot-circle"&gt;
      &lt;div class="pivot-hand" &gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>Thanks!</p>