Exemple on how to to pie charts

2 years ago · b1291edae8
parent 658d2b9a18
commit b1291edae8
1 changed files with 59 additions and 0 deletions
--- a/pies/index.html
+++ b/pies/index.html
@ -0,0 +1,59 @@
 <!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>