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-color:#FFFF00; border: 2px solid #000000; border-radius:{{#var:diameter}}px; overflow: hidden;">
+
<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)