html css 条形图,如何用纯 CSS 创作条形图，不用任何图表库

效果预览

按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以全屏预览。

可交互视频教程

此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。

请用 chrome, safari, edge 打开观看。

源代码下载

请从 github 下载。

代码解读

定义 dom，最外层的容器是卡片，内含一个标题，和一个技能说明，分别描述技能的名称和级别：

<div class="card">

<h2>Development Skills</h2>

<p class="skill html">

<span>HTML5</span>

<span class="level">90%</span>

</p>

</div>

居中显示：

html, body {

height: 100%;

display: flex;

align-items: center;

justify-content: center;

background: linear-gradient(dimgray, silver, silver, dimgray);

}

技能卡片布局：

.card {

width: 400px;

background: linear-gradient(#333, dimgray);

box-sizing: border-box;

padding: 20px;

font-family: sans-serif;

color: white;

letter-spacing: 0.1em;

box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);

}

文字布局：

.c