Difference between revisions of "PieChart"
From Sega Retro
| Line 3: | Line 3: | ||
{{#vardefine:adj|{{#expr:sqrt(({{#var:hyp}}^2) - ({{#var:opp}}^2))}}}} | {{#vardefine:adj|{{#expr:sqrt(({{#var:hyp}}^2) - ({{#var:opp}}^2))}}}} | ||
{{#vardefine:diameter|400}}{{#vardefine:radius|{{#expr:{{#var:diameter}}/2}}}} | {{#vardefine:diameter|400}}{{#vardefine:radius|{{#expr:{{#var:diameter}}/2}}}} | ||
| − | <div style="width:{{#var:diameter}}px; height:{{#var:diameter}}px; background- | + | <div style="width:{{#var:diameter}}px; height:{{#var:diameter}}px; |
| + | |||
| + | background: conic-gradient( | ||
| + | red 6deg, orange 6deg 18deg, yellow 18deg 45deg, | ||
| + | green 45deg 110deg, blue 110deg 200deg, purple 200deg | ||
| + | ); | ||
| + | |||
| + | border: 2px solid #000000; border-radius:{{#var:diameter}}px; overflow: hidden;"> | ||
{{{1|}}} | {{{1|}}} | ||
</div> | </div> | ||
| Line 12: | Line 19: | ||
{{PieChart}} | {{PieChart}} | ||
| + | |||
[[Category:Templates]]</noinclude> | [[Category:Templates]]</noinclude> | ||
Revision as of 04:51, 10 March 2022
I was wondering if you could make a pie chart from CSS alone. Turns out you can.
So let's have a go. Mine will be slightly different because I don't like the idea of using an image. Also it might not work. -Black Squirrel (talk) 10:45, 9 March 2022 (EST)