title: Circular segment using CSS/CSS3
body: <p>Is there any variant to draw a <a href="http://en.wikipedia.org/wiki/Circular_segment" rel="nofollow noreferrer">circular segment</a> using just CSS/CSS3?</p>
  
  <p><a href="https://i.stack.imgur.com/hHc2W.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hHc2W.png" alt="Circle with a dashed line across the top. The section within the line, the segment, is shaded green and is less than half of the cirle. Radius, segment height, etc. are also labeled."></a></p>
  
  <p>I need that green part of circle.</p>
  
  <p>I was trying this:</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-css lang-css prettyprint-override"><code>div {
    width: 86px;
    height: 22px;
    background-color: green;
    border-bottom-right-radius: 42px;
    border-bottom-left-radius: 42px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>But it doesn't look like a circular segment.</p>