Simple Pie Chart

Knowledge Base Entry: #137
^Top
<< Back
Mobile-Menu










Simple Pie Chart
Category: CSS/Snippets
Author: Bugfish
Created at: 2021-07-11 18:40:27
Modified at: 2025-09-19 17:27:23
Directs Hits: 570

Save this code into a .html file, open in your browser and see what is does, you have now 3 pie charts
only with HTML and CSS Code.

<style>
.pie {
     /* Basic layout */
     display: inline-block;
     width: 10em;
     height: 10em;
     border-radius: 50%;

     /* A little styling */
     border: .15em solid #fff;
     box-shadow: 0 .075em .2em .05em rgba(0,0,0,.25);

     /* fixes a minor clipping issue in Chrome */
     background-origin: border-box;
   }

.pie {
  background-image: conic-gradient(
    #d44 calc(3.6deg * var(--segment1)),
    #fc3 0 calc(3.6deg * var(--segment2)),
    #ac0 0
  );
}
</style>

<div class="pie" style="--segment1: 40; --segment2: 70;"></div>
<div class="pie" style="--segment1: 20; --segment2: 50;"></div>
<div class="pie" style="--segment1: 10; --segment2: 80;"></div>

Caution: I do not guarantee the reliability of the information given here, the code described on this page is executed at your own risk and in the event of damage or other unforeseeable consequences I am in no way responsible or liable.
This Website is using Session Cookies for Site Functionality.