title: How to create semi-circle/ellipse with HTML CSS? Like a gauge/speedometer
body: <p>I'm trying to do something like this:</p>
  <p><a href="https://i.stack.imgur.com/4oFWO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4oFWO.png" alt="enter image description here" /></a></p>
  <p>It's not a full or semi circle, and the edges have a little radius. Also need to contain some point to show the current position in percentage. Can someone give me a light on how to put together something close to the 3 ideas below?</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>.circle {
     display: flex;
     width: 200px;
     height: 100px;
     border-top-left-radius: 200px;
     border-top-right-radius: 200px;
     border: 10px solid gray;
     border-bottom: 0;
  }
  
  .circle&gt;.text {
     font-size: 50px;
     margin: auto;
  }
  
  .circle.gradient {
     margin-top: 30px;
     border-image-slice: 1;
     border-width: 10px;
     border-bottom: 0;
     border-image-source: linear-gradient(to left, #6ECE34, #E6A749, #E5A749, #F71C1C);
  }
  
  .line {
     position: relative;
     margin-top: 30px;
     width: 220px;
     height: 10px;
     border-radius: 5px;
     background: linear-gradient(to left, #6ECE34, #E6A749, #E5A749, #F71C1C);
  }
  
  .line&gt;.point {
     position: absolute;
     top: -3px;
     left: 21%;
     width: 8px;
     height: 16px;
     border-radius: 5px;
     border: 1px solid black;
     background: #FFF;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!-- Just semi circle --&gt;
  &lt;div class="circle"&gt;
     &lt;div class="text"&gt;
        21
     &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;!-- With gradient border --&gt;
  &lt;div class="circle gradient"&gt;&lt;/div&gt;
  
  &lt;!-- Maybe strech in Y --&gt;
  &lt;div class="line"&gt;
     &lt;!-- Relative point --&gt;
     &lt;div class="point"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>