How to make a perfect Pie chart using CSS Gradients
You just need to provide border-radius 50% to remove a corner of a given area/square/rectangle. If you want to start your color at a specified angle, then you must provide the color name with starting angle & the same color name with the ending angle. Ending angle of last color need not to be provided. It automatically ends & fills the color.
<html>
<head>
<style>
#d1{
height: 200px;
width: 200px;
background-image: conic-gradient(Pink,pink ,purple,purple,green,green,blue);
border-radius:50%;
}
#d2{
height: 200px;
width: 200px;
background-image: conic-gradient(Pink 0deg,pink 90deg,purple 90deg,purple 180deg,green 180deg,green 270deg,blue 270deg);
border-radius:50%;
}
</style>
</head>
<body>
<h1>Pie Chart using Conic Gradient</h1>
<div id="d1"></div><br><br>
<div id="d2"></div><br><br>
</body>
</html>Look at the output of above code