站长资讯网
最全最丰富的资讯网站

手把手带你使用纯CSS实现饼状图

如何仅使用一个 DIV 配合 CSS 实现饼状图?下面本篇文章就来给大家看看实现方法,希望对大家有所帮助。

手把手带你使用纯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 }
  • 知识点1: inset: 0; 相当于 top: 0; right: 0; bottom: 0; top: 0;
  • 知识点2: conic-gradient 圆锥渐变,css 方法,
赞(0)
分享到: 更多 (0)
网站地图   沪ICP备18035694号-2    沪公网安备31011702889846号