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