html - 在 css/html 中创建人气栏

Question

<分区>

Answer 1

这是一个纯 HTML 和 CSS 的解决方案。您也可以使用 SVG 执行此操作。

http://codepen.io/tylerism/pen/xGpQwQ

HTML

<div class="pop_line active">

</div>
<div class="pop_line active">

</div>
<div class="pop_line active">

</div>
<div class="pop_line">

</div>
<div class="pop_line">

</div>

CSS

.pop_line{
  background:#444;
  border-radius:3px;
  width:5px;
  height:20px;
  float:left;
  margin:2px;
}
.pop_line.active{
  background:#999;

}
html{
  background:#111;
}