<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="x-ua-compatible" content="ie=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Input type="list"</title> <style type="text/css"> :root{ --pie-size:300; --pie-bg:#3434AF; --red:#ed3457; --green:#248991; --orange:#ed8724; --line-color:#cecece; } .pie,.target { border-radius: 100%; position: relative; } .pie { height: calc( var(--pie-size,200) * 1px ); width: calc( var(--pie-size,200) * 1px ); background-color:var(--pie-bg,black); top:5px; left:5px; } .target { height: calc( (var(--pie-size,200) + 10) * 1px ); width: calc( (var(--pie-size,200) + 10) * 1px ); background-color:var(--line-color,grey); } .references { position:fixed; bottom:0; left:0; right:0; background-color:var(--line-color); } </style> </head> <body> <div class="target"> <div class="pie"> </div> </div> <p class="references"> <a href="https://codeburst.io/how-to-pure-css-pie-charts-w-css-variables-38287aea161e"> HOW TO: Pure CSS pie charts w/ CSS variables <i>Create customisable pie charts in ~30 lines of CSS</i> </a> </p> </body> </html>