Template:Piechart/styles.css

/**	Smooth piechart. Module:Piechart /* base structure */ .smooth-pie { display: none; position: relative; width: 100px; height: 100px; border-radius: 50%; background-color: yellowgreen; } /* slices (default = pie25/pieX) */ .smooth-pie div { position: absolute; transform-origin: left bottom; background-color: #655;

top: 0; left: 50%; width: 50%; height: 50%; border-radius: 0 500% 0 0; } .smooth-pie .pie50 { transform-origin: left center; height: 100%; border-radius: 0 100% 100% 0 / 50%; } .smooth-pie .pie12-5 {clip-path: polygon(0% 0%, 100% 0%, 0 100%);} .smooth-pie   .pie5 {clip-path: polygon(0% 0%, 32.49197% 0%, 0 100%);} .smooth-pie   .pie7 {clip-path: polygon(0% 0%, 47.056428% 0%, 0 100%);} .smooth-pie   .pie1 {clip-path: polygon(0% 0%, 6.2914667% 0%, 0 100%);} /* unlock for supported browsers */ @supports(clip-path: circle(50%)) { .smooth-pie { display:block; }	} /* container and legend */ .smooth-pie-container { display: flex; align-items: flex-start; gap: 1em; flex-wrap: wrap; } .smooth-pie-legend { list-style-type: none !important; margin: 0 !important; padding: 0 !important; } .smooth-pie-legend li { display: flex; align-items: center; gap: .5em; } .smooth-pie-legend li span { display: block; box-sizing: border-box; } .smooth-pie-legend li .l-color { border: 1px solid black; width: .8em; height: .8em; }