Simple Pie Chart with HTML and CSS

Article 137 in HTML

2021-07-11 18:40:27 from bugfish
Simple Pie Chart with HTML and CSS
HTML / Hints
Last Review on: 2022-05-21 07:45:45 | Hits: 365

.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

<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>

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.

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.
Currently 0 Upvotes!
captcha image
System - 2021-07-11 20:02:59
We appreciate comments on our site!
Switch: 151 | Arrive: 207
This Website is using Session Cookies for Site Functionality and AWStats.