是否可以使用html、css和js绘制图表？

Question

我们如何使用html、css和js绘制这样的基准。

使用Jee Main和Advance的用户评分基准：

​

​

Answer 1

一个小的演示开始，但不要期望从这个网站的一切。为自己探索：

您必须修改left和width属性来操作图表。

这只是布局，CSS，图片和其他你必须要发现的东西。

* {
  box-sizing: border-box;
}

.outer {
  background-color: #ccc;
  width: 100%;
  height: 50px;
}

.inner {
  background-color: yellow;
  width: 65%;
  height: 50px;
  float: left;
  position: absolute;
}

.flag-1 {
  border-left: 2px solid #777;
  height: 70px;
  position: absolute;
  left: 30%;
  float: left;
  padding-top: 60px;
  padding-bottom: 20px;
  padding-left: 5px;
}

.flag-2 {
  border-left: 2px solid #777;
  height: 70px;
  position: absolute;
  left: 80%;
  float: left;
  padding-top: 60px;
  padding-bottom: 20px;
  padding-left: 5px;
}

<div class="outer">
  <div class="inner">

  </div>

  <div class="flag-1">
    This is one
  </div>

  <div class="flag-2">
    This is two
  </div>
</div>

​