|
/** |
|
* 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; |
|
} |
/piechart.css
Created