728x90
반응형
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.
제일 간단하고 좋은 방법이 아닐까 싶네요ㅎㅎ
나누고 싶은 영역의 각도만 작성해준다면 순식간에 완성하는 마법이랄까요!?ㅎㅎ
글 읽어주셔서 감사합니다:)
728x90
'css' 카테고리의 다른 글
| [css] css 변수(variable)를 파헤쳐보기(feat.지역변수, 전역변수) (4) | 2023.04.26 |
|---|---|
| [CSS]border에 그라데이션 넣기(feat. 사각형, 원형) (0) | 2023.04.25 |
| [css] flex 내 가변 요소 (가변 자식 요소가 부모 요소를 넘을 때) (0) | 2023.02.06 |
| [css] 텍스트 흐름 효과 marquee? animation?(반전 주의) (0) | 2023.02.02 |