Skip to content

Instantly share code, notes, and snippets.

@ryndel ryndel/piechart.css
Created Jan 4, 2012

Embed
What would you like to do?
pure css3 piechart
/**
* pure css3 piechart
*/
#segment2, #segment3, #segment4, #segment5, #segment6 { display: none }
.chart {
position:relative;
width:500px;
height:250px;
}
.hold {
position:absolute;
width:200px;
height:200px;
clip:rect(0px,200px,200px,100px);
left:300px;
}
.pie {
position:absolute;
/* width:100px;
height:200px;
-moz-border-radius:100px 0 0 100px;
-webkit-border-radius:100px 0 0 100px;
border-radius:100px 0 0 100px;
-moz-transform-origin:right center;
-webkit-transform-origin:right center;
transform-origin:right center; */
width:200px;
height:200px;
clip:rect(0px,100px,200px,0px);
-moz-border-radius:100px;
-webkit-border-radius:100px;
border-radius:100px;
}
.hold.gt50 {
clip:rect(auto, auto, auto, auto);
}
.pie.fill {
-moz-transform:rotate(180deg) !important;
-webkit-transform:rotate(180deg) !important;
-o-transform:rotate(180deg) !important;
transform:rotate(180deg) !important;
}
/* .pie:hover {
margin-left:10px;
margin-top:-10px;
} */
.offset {
margin-left:10px;
margin-top:-10px;
}
#segment0 {
-moz-transform:rotate(0deg);
-webkit-transform:rotate(0deg);
-o-transform:rotate(0deg);
transform:rotate(0deg);
}
#segment0 .pie {
background-color:orange;
border-color:orange;
-moz-transform:rotate(116.28deg);
-webkit-transform:rotate(116.28deg);
-o-transform:rotate(116.28deg);
transform:rotate(116.28deg);
}
#segment0-lbl {
border-left:orange solid 1em;
padding-left:.5em;
}
#segment1 {
-moz-transform:rotate(116.28deg);
-webkit-transform:rotate(116.28deg);
-o-transform:rotate(116.28deg);
transform:rotate(116.28deg);
}
#segment1 .pie {
background-color:blue;
border-color:blue;
-moz-transform:rotate(109.8deg);
-webkit-transform:rotate(109.8deg);
-o-transform:rotate(109.8deg);
transform:rotate(109.8deg);
}
#segment1-lbl {
border-left:blue solid 1em;
padding-left:.5em;
}
#segment2 {
-moz-transform:rotate(226.08deg);
-webkit-transform:rotate(226.08deg);
-o-transform:rotate(226.08deg);
transform:rotate(226.08deg);
}
#segment2 .pie {
background-color:purple;
border-color:purple;
-moz-transform:rotate(10.08deg);
-webkit-transform:rotate(10.08deg);
-o-transform:rotate(10.08deg);
transform:rotate(10.08deg);
}
#segment2-lbl {
border-left:purple solid 1em;
padding-left:.5em;
}
#segment3 {
-moz-transform:rotate(236.16deg);
-webkit-transform:rotate(236.16deg);
-o-transform:rotate(236.16deg);
transform:rotate(236.16deg);
}
#segment3 .pie {
background-color:darkcyan;
border-color:darkcyan;
-moz-transform:rotate(6.12deg);
-webkit-transform:rotate(6.12deg);
-o-transform:rotate(6.12deg);
transform:rotate(6.12deg);
}
#segment3-lbl {
border-left:darkcyan solid 1em;
padding-left:.5em;
}
#segment4 {
-moz-transform:rotate(242.28deg);
-webkit-transform:rotate(242.28deg);
-o-transform:rotate(242.28deg);
transform:rotate(242.28deg);
}
#segment4 .pie {
background-color:salmon;
border-color:salmon;
-moz-transform:rotate(5.76deg);
-webkit-transform:rotate(5.76deg);
-o-transform:rotate(5.76deg);
transform:rotate(5.76deg);
}
#segment4-lbl {
border-left:salmon solid 1em;
padding-left:.5em;
}
#segment5 {
-moz-transform:rotate(248.04deg);
-webkit-transform:rotate(248.04deg);
-o-transform:rotate(248.04deg);
transform:rotate(248.04deg);
}
#segment5 .pie {
background-color:grey;
border-color:grey;
-moz-transform:rotate(111.96deg);
-webkit-transform:rotate(111.96deg);
-o-transform:rotate(111.96deg);
transform:rotate(111.96deg);
}
#segment5-lbl {
border-left:grey solid 1em;
padding-left:.5em;
}
<!-- content to be placed inside <body>…</body> -->
<div class="chart">
<div id="segment0" class="hold">
<div class="pie"></div>
</div>
<div id="segment1" class="hold">
<div class="pie"></div>
</div>
<div id="segment2" class="hold">
<div class="pie"></div>
</div>
<div id="segment3" class="hold">
<div class="pie"></div>
</div>
<div id="segment4" class="hold">
<div class="pie"></div>
</div>
<div id="segment5" class="hold">
<div class="pie"></div>
</div>
</div>
{"view":"split","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.