title: Need to put gradient in a semi circle (Not left to right, but like pizza slices)
body: <p>Hi I am trying to make a speedometer with gradient colours. My current code gets gradient colours, but its left to right.
  <a href="https://i.stack.imgur.com/0mWN8.png" rel="nofollow noreferrer">Standing gradient - Wrong</a></p>
  <p>I don't want the gradient that is in the vertical order. I want it to curve and fade.</p>
  <p>Code:</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> .gauge {
              font-family: Arial, Helvetica, sans-serif;
              background-color: red;
              background-image: linear-gradient(to right , red , orange , yellow , green);
              box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.09), 0 0 35px 5px rgba(255, 255, 255, 0.29);
              width: 200px;
              height: 100px;
              border-radius: 100px 100px 0 0;
              position: relative;
              overflow: hidden;
              /* safari fix */
              -webkit-transform-style: flat;
              -webkit-transform: translateZ(0px);
          }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="gauge"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>What i am trying to achieve is a gradient of pizza pieces.</p>
  <p><a href="https://i.stack.imgur.com/0mWN8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0mWN8.png" alt="expected result" /></a></p>