[CSS]CSS만을 이용해서 차트 그리기

[CSS] - [CSS]그라디언트를 이용해 간단하게 원형차트/도넛차트 그리기(애니메이션으로 차트그리기 )

이전에 그라디언트를 이용해 원형 차트를 그렸었다.

이건 원형으로 그릴 수 있지만, 

애니메이션 효과를 내기위해서는 스크립트를 이용해야한다..

 

그럼 완전 CSS만을 이용해서 차트를 그릴 수도 있다.

 

하지만 반원만 가능하다..

 

그려진 반원을 영역밖에 두었다가 rotateZ를 이용해 돌려서 그려지는 것처럼 보이기 때문이다. 

.chart-skills 의 overflow : hidden을 지워보면 어떻게 움직이는지 알 수 있다. 

 

 

 

 

 

[javascript] - [자바스크립트플러그인]도넛 차트 그려주는 플러그인