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>