Vorlage: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;
}