Multi-coloured circular div using background colou

Question

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?

This is the code I've tried:

background: -moz-linear-gradient(left, red, red 20%, blue 20%, blue);

Which results in:

But I want it to look more like this?:

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..)?

Answer 1

It can be done using something called conic gradients. Unfortunately, they're not supported by many browsers right now. Lea Verou created a lightweight JS plugin though that can enable their usage:

https://leaverou.github.io/conic-gradient/

This could be used to create:

.elem {
width: 200px;
height: 200px;
background: conic-gradient(yellow 8.3%, greenyellow 0 16.6%, green 0 24.9%, darkgreen 0 33.2%, blue 0 41.5%, violet 0 49.8%, purple 0 58.1%, pink 0 66.4%, red 0 74.7%, orangered 0 83%, orange 0 91.3%, gold 0 100%);
border-radius: 50%
}

<script src="//cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<script src="//cdn.rawgit.com/LeaVerou/conic-gradient/gh-pages/conic-gradient.js"></script>

<div class="elem"></div>