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

Question

How can we draw a benchmark like this using html,css and js

Benchmark of user score with Jee Mains and Advance:

It's possible, you'll get down voted if you don't show what you've tried. — Benneb10, Dec 08 '16 at 15:50
It's possible, this tutorial might help you to make something similar https://css-tricks.com/css3-progress-bars/ — balapa, Dec 08 '16 at 15:59

score 0 · Accepted Answer · answered Dec 08 '16 at 16:03

A small demo to get started, but don't expect to get everything from this site. Explore for yourself:

You have to modify the left and width properties to manipulate the diagram.

This is just the layout; CSS, images and other stuff you have to discover.

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

Thanks! Made some changes and got the final output. – Ritesh Dec 08 '16 at 18:04 — Ritesh, Dec 08 '16 at 18:04

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

1 Answers1