如何仅使用一个 DIV 配合 CSS 实现饼状图?下面本篇文章就来给大家看看实现方法,希望对大家有所帮助。
本文为译文「意译」
完整的代码请滑到文末。
我们只使用一个div
,仅采用css
实现饼状图。
HTMl 结构
<div class="pie" style="--p:60;--b:10px;--c:purple;">60%</div>
我们添加了几个 css
的变量:
--p
:进度条的百分比(纯数字,不带%),饼状图值和div
内容(带%)一致。--b
:边框厚度的值--c
:边框的主体颜色
本文使用的是简写的变量,在生产环境中,为了达到可读性,我们应该使用--p -> --percentage
, --b -> --border-thickness
, --c -> --main-color
来表示。
Pie 的基本设置
我们为饼状图设定基本的样式。
.pie { --w: 150px; // --w -> --width width: var(--w); aspect-ratio: 1; // 纵横比,1 说明是正方形 display: inline-grid; place-content: center; margin: 5px; font-size: 25px; font-weight: bold; font-family: sans-serif; }
上面我们使用了 aspect-ratio: 1;
保证 div
是正方形,当然你也可以使用 height: var(--w)
达到效果。
接下来,我们使用伪元素实现简单的饼状图:
.pie:before { content: "", position: absoute; border-radius: 50%; inset: 0; // 知识点 1 background: conic-gradient(var(--c) calc(var(--p)*1%),#0000 0); // 知识点 2 }