Google trends Public Holidays Coupon Code Code Compiler

Pure CSS Pie Chart


Dec 25, 2018

Pure CSS Pie Chart

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 2024. All rights are reserved