css3 - Slices in CSS pie chart are offset -

css3 - Slices in CSS pie chart are offset -

i'm trying create half pie chart using css. looks pretty good, offset slices. can see in codepen example, previous slices stretch farther later ones. why?

<div class="container"> <div class="slice slice1"></div> <div class="slice slice2"></div> <div class="slice slice3"></div> </div>

and css:

.container { width: 300px; height: 300px; margin-left: 50px; position: absolute; clip: rect(0px, 300px, 150px, 0px); } .slice { width: 300px; height: 150px; position: absolute; border-radius: 300px 300px 0px 0px; -webkit-transform-origin: center bottom; } .slice1 { background-color: red; -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); transform:rotate(0deg); } .slice2 { background-color: green; -webkit-transform:rotate(11deg); -moz-transform:rotate(11deg); transform:rotate(11deg); } .slice3 { background-color: yellow; -webkit-transform:rotate(73deg); -moz-transform:rotate(73deg); transform:rotate(73deg); }

i found css pie chart code , modified create half circle

html

<div id="piechart"> <div class="pie" data-start="0" data-value="30"></div> <div class="pie highlight" data-start="30" data-value="30"></div> <div class="pie" data-start="60" data-value="40"></div> <div class="pie big" data-start="100" data-value="260"></div> </div>

css

#piechart { position:absolute; clip:rect(0px, 251px, 100px, 0px); } /* create each pie piece rectangle twice high wide. move transform origin middle of left side. ensure overflow set hidden. */ .pie { position:absolute; width:100px; height:200px; overflow:hidden; left:150px; -moz-transform-origin:left center; -ms-transform-origin:left center; -o-transform-origin:left center; -webkit-transform-origin:left center; transform-origin:left center; } /* unless piece represents more 50% of whole chart. create square, , ensure transform origin in center. note: since ever single piece, move piece specific rule , remove class */ .pie.big { width:200px; height:200px; left:50px; -moz-transform-origin:center center; -ms-transform-origin:center center; -o-transform-origin:center center; -webkit-transform-origin:center center; transform-origin:center center; } /* actual visible part of pie. give same dimensions regular piece. utilize border radius create half circle. move transform origin middle of right side. force out left of containing box. */ .pie:before { content:""; position:absolute; width:100px; height:200px; left:-100px; border-radius:100px 0 0 100px; -moz-transform-origin:right center; -ms-transform-origin:right center; -o-transform-origin:right center; -webkit-transform-origin:right center; transform-origin:right center; } /* if it's part of big piece, bring square */ .pie.big:before { left:0px; } /* big pieces need sec semicircle, pointed in opposite direction hide first part behind. */ .pie.big:after { content:""; position:absolute; width:100px; height:200px; left:100px; border-radius:0 100px 100px 0; } /* add together colour each piece. */ .pie:nth-of-type(1):before, .pie:nth-of-type(1):after { background-color:blue; } .pie:nth-of-type(2):after, .pie:nth-of-type(2):before { background-color:green; } .pie:nth-of-type(3):after, .pie:nth-of-type(3):before { background-color:red; } .pie:nth-of-type(4):after, .pie:nth-of-type(4):before { background-color:orange; } /* rotate each piece based on cumulative starting position */ .pie[data-start="30"] { -moz-transform: rotate(30deg); /* firefox */ -ms-transform: rotate(30deg); /* ie */ -webkit-transform: rotate(30deg); /* safari , chrome */ -o-transform: rotate(30deg); /* opera */ transform:rotate(30deg); } .pie[data-start="60"] { -moz-transform: rotate(60deg); /* firefox */ -ms-transform: rotate(60deg); /* ie */ -webkit-transform: rotate(60deg); /* safari , chrome */ -o-transform: rotate(60deg); /* opera */ transform:rotate(60deg); } .pie[data-start="100"] { -moz-transform: rotate(100deg); /* firefox */ -ms-transform: rotate(100deg); /* ie */ -webkit-transform: rotate(100deg); /* safari , chrome */ -o-transform: rotate(100deg); /* opera */ transform:rotate(100deg); } /* , rotate amount of pie that's showing. note: add together grade final piece, fill in unsightly gaps. */ .pie[data-value="30"]:before { -moz-transform: rotate(31deg); /* firefox */ -ms-transform: rotate(31deg); /* ie */ -webkit-transform: rotate(31deg); /* safari , chrome */ -o-transform: rotate(31deg); /* opera */ transform:rotate(31deg); } .pie[data-value="40"]:before { -moz-transform: rotate(41deg); /* firefox */ -ms-transform: rotate(41deg); /* ie */ -webkit-transform: rotate(41deg); /* safari , chrome */ -o-transform: rotate(41deg); /* opera */ transform:rotate(41deg); } .pie[data-value="260"]:before { -moz-transform: rotate(260deg); /* firefox */ -ms-transform: rotate(260deg); /* ie */ -webkit-transform: rotate(260deg); /* safari , chrome */ -o-transform: rotate(260deg); /* opera */ transform:rotate(260deg); } /* note: apply custom classes (i.e. .s0 .v30) if css3 attr() function proposal ever gets implemented, above custom piece rules replaced following: .pie[data-start] { transform:rotate(attr(data-start,deg,0); } .pie[data-value]:before { transform:rotate(attr(data-value,deg,0); } */

pie chart code http://codepen.io/atomicnoggin/pen/feish

css3 pie-chart