{"id":1851,"date":"2022-02-16T04:38:25","date_gmt":"2022-02-16T04:38:25","guid":{"rendered":"https:\/\/swatilathia.com\/?p=1851"},"modified":"2022-03-09T05:29:08","modified_gmt":"2022-03-09T05:29:08","slug":"how-to-make-a-perfect-pie-chart-using-css-gradients","status":"publish","type":"post","link":"https:\/\/swatilathia.com\/?p=1851","title":{"rendered":"How to make a perfect Pie chart using CSS Gradients"},"content":{"rendered":"\n

Y<\/b><\/span>ou <\/strong>just <\/strong>need <\/strong>to <\/strong>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.<\/p>\n\n\n\n

<html>\n<head>\n<style>\n#d1{\n  height: 200px;\n  width: 200px;\n  background-image: conic-gradient(Pink,pink ,purple,purple,green,green,blue);\n  border-radius:50%;\n}\n#d2{\n  height: 200px;\n  width: 200px;\n  background-image: conic-gradient(Pink 0deg,pink 90deg,purple 90deg,purple 180deg,green 180deg,green 270deg,blue 270deg);\n  border-radius:50%;\n}\n<\/style>\n<\/head>\n<body>\n      <h1>Pie Chart using Conic Gradient<\/h1>\n      <div id=\"d1\"><\/div><br><br>\n      <div id=\"d2\"><\/div><br><br>\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n
Look at the output of above code<\/p>\n\n\n\n\n\n