Ist es möglich, HTML, CSS und JS

Question

Wie können wir eine Benchmark wie diese zeichnen mit HTML, CSS und JS

Benchmark der Benutzer Punktzahl mit Jee Mains und Voraus zeichnen Diagramme mit:

Answer 1

Eine kleine Demo, um loszulegen, aber erwarte nicht, dass du alles von dieser Seite bekommst. Erkunden Sie selbst:

Sie müssen die Eigenschaften left und width ändern, um das Diagramm zu manipulieren.

Dies ist nur das Layout; CSS, Bilder und andere Sachen, die du entdecken musst.

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