css로 차트 그래프를 만들어보자

css 이용하여 차트 만들기

<div class="pie-chart">
	<div class="pie less"> 
	<!-- if percentage <= 50% -->  
	<!-- rotate: -180 + ( 3.6 * percentage ) -->
		<div class="pie-piece" style="transform:rotate( -108deg )"></div> 
		<div class="pie-piece right"></div>
	</div>
	<div class="percentage">
		 20<span class="unit">%</span>
	</div>
</div>
	
<hr />

<div class="pie-chart">
	<div class="pie more"> <!-- 51% <= percentage < 100& -->  
		<!-- rotate: 3.6 * (percentage - 50 ) -->
		<div class="pie-piece" style="transform:rotate( 144.0deg )"></div> 
		<div class="pie-piece right"></div>
	</div>
	<div class="percentage">
		 90<span class="unit">%</span>
	</div>
</div>