[css] 파이 차트(Pie chart) 만들기 conic-gradients

css를 이용하여 파이 차트를 만들기!

 

:before 을 이용하는 방법

---

See the Pen Untitled by Younjung Jeong (@jojv) on CodePen.

---

가장 많이 사용하는 방법인듯 합니다. 50%까지는 간단하게 표현할 수 있지만, 60%이상을 표현하기 위해서 또 다른 애니메이션을 작성해야하기에 약간 복잡한 거 같네요...

 

svg를 이용한 방법

---

See the Pen Untitled by Younjung Jeong (@jojv) on CodePen.

---

svg에 대한 이해도가 있어야 사용할 수 있는 방법이긴 하지만, 위 방법보다는 어떻게 표현되는지, %의 수치와 도형의 수치를 일치하게 표현할 수 있어서 훨씬 직관적인 방법인 거 같습니다.

 

conic-gradients를 이용한 방법

---

See the Pen Untitled by Younjung Jeong (@jojv) on CodePen.

---

제일 간단하고 좋은 방법이 아닐까 싶네요ㅎㅎ 

나누고 싶은 영역의 각도만 작성해준다면 순식간에 완성하는 마법이랄까요!?ㅎㅎ

 

글 읽어주셔서 감사합니다:)