Pie Chart
Web Dev, HTML, CSS, SVG, BootStrap/CSS 예제반응형
<!doctype html>
<html>
<head>
<style>
.pie
{
padding: 48vmin;
border-radius: 50%;
--value: 0%;
background: conic-gradient(red var(--value, 0%), yellow 0 60%, black 0);
}
</style>
</head>
<body>
<div class="pie" style="--value: 40%;"></div>
</body>
</html>
반응형
'Web Dev, HTML, CSS, SVG, BootStrap > CSS 예제' 카테고리의 다른 글
| 체크 무늬 3D 배경 회전 (0) | 2019.10.12 |
|---|---|
| Pie Chart (0) | 2019.10.08 |
| Typing Text Animation (0) | 2018.09.28 |
| Gradient Button,그래디언트버튼 (0) | 2018.09.28 |
| Border 애니메이션 (0) | 2018.09.28 |