title: Multi-coloured circular div using background colours?
body: <p>I'm trying to create a multi-coloured circle in CSS to simulate a wheel of fortune, I've tried using linear gradients but it just applies strips of colour running vertically through the circular div rather than being coloured areas as if you were cutting up a pizza if that makes sense?</p>
  
  <p><strong>This is the code I've tried:</strong></p>
  
  <pre><code>background: -moz-linear-gradient(left, red, red 20%, blue 20%, blue);
  </code></pre>
  
  <p><strong>Which results in:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/glXkA.png" rel="noreferrer"><img src="https://i.stack.imgur.com/glXkA.png" alt="Wheel-attempt"></a></p>
  
  <p><strong>But I want it to look more like this?:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/b7il8.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/b7il8.jpg" alt="Coloured wheel"></a></p>
  
  <p>Is this possible in CSS or am I going to have to use a background image (I'd rather avoid this because it isn't as easy to scale as the page resizes etc..)?</p>