原文代码：https://segmentfault.com/a/1190000014768534#articleHeader1
HTML代码：
<html> ???<head> ???????<link rel="stylesheet" href="index.css"> ???</head> ???<body> ???????<div class="card"> ???????????<h2>Development Skills</h2> ???????????<p class="skill html"> ???????????????<span>HTML5</span> ???????????????<span class="level">90%</span> ???????????</p> ???????????<p class="skill css"> ???????????????<span>CSS</span> ???????????????<span class="level">95%</span> ???????????</p> ???????????<p class="skill javascript"> ???????????????<span>JavaScript</span> ???????????????<span class="level">80%</span> ???????????</p> ???????????<p class="skill svg"> ???????????????<span>SVG</span> ???????????????<span class="level">60%</span> ???????????</p> ???????????<p class="skill canvas"> ???????????????<span>Canvas</span> ???????????????<span class="level">75%</span> ???????????</p> ???????</div> ???</body></html>
CSS代码：
html, body { ???margin: 0; ???padding: 0; ???height: 100%; ???display: flex; ???justify-content: center; ???align-items: center; ???/* linear-gradient：线性梯度；dimgray:暗灰色； silver: 银色 */ ???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);}.card h2{ ???/* 字母: 大写 */ ???text-align: center; ???text-transform: uppercase;}.card .skill{ ???height: 50px;}.card .skill span{ ???display: block;}.card .skill .level{ ???transform: translateY(-1em); ???text-align: right; ???position: relative;}/* 用伪元素画出条形图 */.card .skill .level::before,.card .skill .level::after{ ???content: ‘‘; ????width: 100%; ???height: 100%; ???position: absolute; ???top: 1.2em; ???left: 0;}.card .skill .level::before{ ???border: 1px solid mediumspringgreen; ???border-radius: 0.2em; ???height: 105%;}.card .skill .level::after{ ???background-image: linear-gradient(to right,mediumspringgreen,mediumspringgreen); ???background-repeat: no-repeat; ???background-position: top 0.1em left 0.1em;}/* 设置条形图的填充比例 */.card .html .level::after { ???background-size: 90% 1em;}.card .css .level::after { ???background-size: 95% 1em;}.card .javascript .level::after { ???background-size: 80% 1em;}.card .svg .level::after { ???background-size: 60% 1em;}.card .canvas .level::after { ???background-size: 75% 1em;}.card .skill:hover { ???background-color: #333;}15.纯 CSS 创作条形图，不用任何图表库
原文地址：https://www.cnblogs.com/FlyingLiao/p/10236281.html