Pure CSS Pie Chart


Dec 25, 2018

Simple way to create Pie chart using HTML and CSS only.

CSS Code


 #pie div {
     width: 300px;
     height: 300px;
     display: inline-block;
     background-size: 100% 100%;
     background-position: center;
        background: conic-gradient(yellowgreen 40%, gold 0 70%, #f06 0);
        border-radius: 50%
 }


HTML Code


<section id="pie">
   
    <div></div>
    
</section>

ADD javascript files


<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

<script src="https://leaverou.github.io/conic-gradient/conic-gradient.js"></script>


Copyright 2018. All rights are reserved