From e7f894ad9bdd85407db12d1265493c63dd9c5b14 Mon Sep 17 00:00:00 2001 From: bendtherules Date: Thu, 27 Mar 2014 02:03:55 -0700 Subject: [PATCH] Pie chart added --- pie/pie-1.css | 80 -------------------------------------------- pie/pie-1.html | 21 ------------ pie/pie.css | 91 ++++++++++++++++++++++++++++++++++++++++++++++++++ pie/pie.html | 30 +++++++++++++++++ pie/pie.styl | 87 +++++++++++++++++++++++++++++++++++++++++++++++ 5 files changed, 208 insertions(+), 101 deletions(-) delete mode 100644 pie/pie-1.css delete mode 100644 pie/pie-1.html create mode 100644 pie/pie.css create mode 100644 pie/pie.html create mode 100644 pie/pie.styl diff --git a/pie/pie-1.css b/pie/pie-1.css deleted file mode 100644 index 1aef28f..0000000 --- a/pie/pie-1.css +++ /dev/null @@ -1,80 +0,0 @@ -html,body{ - width: 100%; - height: 100%; -} - -body{ - position: relative; - margin: 0; -} - -.wrapper{ - -} - -.pie-part{ - position: absolute; - width: 200px; - height: 100px; - left: 200px; - top: 200px; - background-color: green; - border-top-right-radius: 50% 100%; - border-top-left-radius: 50% 100%; - -webkit-transform-origin: 50% 100%; - -moz-transform-origin: 50% 100%; - -ms-transform-origin: 50% 100%; - -o-transform-origin: 50% 100%; - transform-origin: 50% 100%; -} - -.part-1{ - background-color: rgb(200,50,255); - -webkit-transform: rotate(0deg); - -moz-transform: rotate(0deg); - -ms-transform: rotate(0deg); - -o-transform: rotate(0deg); - transform: rotate(0deg); - z-index: 1; -} - -.part-2{ - background-color: rgb(150,100,255); - -webkit-transform: rotate(120deg); - -moz-transform: rotate(120deg); - -ms-transform: rotate(120deg); - -o-transform: rotate(120deg); - transform: rotate(120deg); - z-index: 2; -} - -.part-3{ - background-color: rgb(100,150,255); - -webkit-transform: rotate(150deg); - -moz-transform: rotate(150deg); - -ms-transform: rotate(150deg); - -o-transform: rotate(150deg); - transform: rotate(150deg); - z-index: 3; -} - -.part-4{ - background-color: rgb(50,200,255); - -webkit-transform: rotate(220deg); - -moz-transform: rotate(220deg); - -ms-transform: rotate(220deg); - -o-transform: rotate(220deg); - transform: rotate(220deg); - z-index: 4; - left: 0; - top:-100px; -} - -.clipper{ - overflow: hidden; - position: absolute; - left: 200px; - top: 300px; - width: 200px; - height: 100px; -} diff --git a/pie/pie-1.html b/pie/pie-1.html deleted file mode 100644 index b6710f6..0000000 --- a/pie/pie-1.html +++ /dev/null @@ -1,21 +0,0 @@ - - - - - - CSS PIE Chart - - - - -
-
-
-
-
-
-
-
- - - diff --git a/pie/pie.css b/pie/pie.css new file mode 100644 index 0000000..3bae850 --- /dev/null +++ b/pie/pie.css @@ -0,0 +1,91 @@ +html, +body { + width: 100%; + height: 100%; +} +body { + margin: 0; + text-align: center; +} +.pie-chart { + position: absolute; + width: 50vh; + height: 50vh; + left: 25vh; + top: 25vh; +} +.wrapper { + position: relative; + width: 100%; + height: 100%; +} +.pie-part { + width: 100%; + height: 50%; + position: absolute; +} +.pie-part .part-inner { + position: absolute; + width: 100%; + height: 100%; + left: 0; + top: 0; + background-color: #008000; + border-top-right-radius: 50% 100%; + border-top-left-radius: 50% 100%; + -webkit-transform-origin: 50% 100%; + -moz-transform-origin: 50% 100%; + -ms-transform-origin: 50% 100%; + -o-transform-origin: 50% 100%; + transform-origin: 50% 100%; +} +clipper, +.part-4 { + overflow: hidden; + position: absolute; + left: 0; + top: 50%; + width: 100%; + height: 50%; +} +clipper-inner, +.part-4 .part-inner { + left: 0; + top: -100%; +} +.part-1 .part-inner { + background-color: #c832ff; + -webkit-transform: rotate(0deg); + -moz-transform: rotate(0deg); + -ms-transform: rotate(0deg); + -o-transform: rotate(0deg); + transform: rotate(0deg); + z-index: 1; +} +.part-2 .part-inner { + background-color: #9664ff; + -webkit-transform: rotate(120deg); + -moz-transform: rotate(120deg); + -ms-transform: rotate(120deg); + -o-transform: rotate(120deg); + transform: rotate(120deg); + z-index: 2; +} +.part-3 .part-inner { + background-color: #6496ff; + -webkit-transform: rotate(150deg); + -moz-transform: rotate(150deg); + -ms-transform: rotate(150deg); + -o-transform: rotate(150deg); + transform: rotate(150deg); + z-index: 3; +} +.part-4 .part-inner { + background-color: #32c8ff; + -webkit-transform: rotate(220deg); + -moz-transform: rotate(220deg); + -ms-transform: rotate(220deg); + -o-transform: rotate(220deg); + transform: rotate(220deg); + z-index: 4; +} diff --git a/pie/pie.html b/pie/pie.html new file mode 100644 index 0000000..ef7d3aa --- /dev/null +++ b/pie/pie.html @@ -0,0 +1,30 @@ + + + + + + + CSS PIE Chart + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + diff --git a/pie/pie.styl b/pie/pie.styl new file mode 100644 index 0000000..a1efc62 --- /dev/null +++ b/pie/pie.styl @@ -0,0 +1,87 @@ +full=100% +half=50% +html,body{ + width: 100%; + height: 100%; +} + +body{ + margin: 0; + text-align center +} + +.pie-chart{ + position absolute + width 50vh + height 50vh + left 25vh + top 25vh +} + +.wrapper + position relative + width full + height full + +.pie-part + width full + height half + position absolute + +.pie-part + .part-inner + position: absolute; + width: full + height: full + left: 0 + top: 0 + background-color: green; + border-top-right-radius: 50% 100%; + border-top-left-radius: 50% 100%; + -webkit-transform-origin: 50% 100%; + -moz-transform-origin: 50% 100%; + -ms-transform-origin: 50% 100%; + -o-transform-origin: 50% 100%; + transform-origin: 50% 100%; + +clipper{ + overflow: hidden; + position: absolute; + left: 0; + top: 50%; + width: 100%; + height: 50%; +} +clipper-inner + left 0 + top -100% + +transform() + -webkit-transform arguments + -moz-transform arguments + -ms-transform arguments + -o-transform arguments + transform arguments + +angles=(0 120 150 220) +angles_sum=null +colors= rgb(200, 50, 255) rgb(150, 100, 255) rgb(100, 150, 255) rgb(50, 200, 255) + +for count in 1..4 + col=colors[(count - 1)] + angle=angles[(count - 1)] + if angles_sum is not defined + angles_sum=angle + else + angles_sum+=angle + .part-{count} + .part-inner + background-color col + transform rotate(angle deg) + z-index count + + if angles_sum>180 + .part-{count} + @extend clipper + .part-inner + @extend clipper-inner