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..)?
Best Answer
One solution is to use multiple background layer considering rotated linear-gradient. We can also rely on pseudo-element and some transparent colors.
Then simply adjust the degrees, colors, opacity of colors and position of pseudo element to obtain any chart you want:
Here is more example considering different configuration
background-position
like the answer of @vals) :Related question with a different way to achieve the same result: Sass/CSS color wheel