html、css和js可以画图吗

Question

我们如何使用 html、css 和 js

绘制这样的基准

Jee Mains 和 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>

html、css和js可以画图吗

Is it possible to draw diagrams using html, css and js

javascript

html

css

charts

diagram