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

Question

我们如何使用html，css和js

绘制这样的基准

Jee Mains和Advance的用户评分基准：

Answer 1

一个小型的演示，但不要期望从这个网站获得所有内容。为自己探索：

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

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

＆＃13;

＆＃13;

* {
  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;
}

＆＃13;

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

  </div>

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

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

＆＃13;

＆＃13;

＆＃13;