how to draw a vertical scale bar with css [closed]

It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center. Closed 11 years ago.

i want to draw a vertical scale bar with css for my project. please help me. here u can see the image.

http://www.google.co.in/imgres?q=vertical+scale+bar&um=1&hl=en&sa=N&biw=1024&bih=578&tbm=isch&tbnid=FJiiXsutIEBcKM:&imgrefurl=http://www.anychart.com/products/anychart/docs/users-guide/gauge-linear-scale-bar-v.html&docid=3x5FkAAE7L13NM&w=150&h=500&ei=EFOFTu2HPMjxrQei8Y3tAw&zoom=1&iact=hc&vpx=236&vpy=43&dur=1&开发者_如何学JAVAhovh=400&hovw=120&tx=78&ty=217&page=1&tbnh=128&tbnw=38&start=0&ndsp=18&ved=1t:429,r:1,s:0

like above diagram i have to draw with css and html.

---

You could try something like this I suppose. Just need to add in some scale marks. Can set the height of the inner bar dynamically with javascript / or server side output.

<div id="container">
    <div id="therm">
        <div id="inner">
            <div id="bar">&nbsp;</div>
        </div>
    </div>
</div>

#container{
    width:60px;
    height: 350px;
}

#therm{
    background-color: green;  
    width: 100%;
    height: 100%; 
    position: relative;
}

#inner{
    position: absolute;
    left:0;
    bottom: 0;
    width: 100%;
}

#bar{
    background-color: black;
    width: 15px;
    height: 250px;
    margin: 0px auto;
}

related fiddle: http://jsfiddle.net/sUeCn/

---

You can try something like this, that shows scale and fills the scale bar with a nice gradient color

<div id="scale">
    200 -<br />
    .<br />
    .<br />
    .<br />
    175 -<br />
    .<br />
    .<br />
    .<br />
    150 -<br />
    .<br />
    .<br />
    .<br />
    125 -<br />
    .<br />
    .<br />
    .<br />
    100 -<br />
    .<br />
    .<br />
    .<br />
    75 -<br />
    .<br />
    .<br />
    .<br />
    50 -<br />
<div>
<div id="outer">
    <div>
    </div>
</div>

and the following CSS

#scale {
    width: 30px;
    font-size: 0.6em;
    text-align: right;
}
#outer {
    position: absolute;
    left: 42px;
    top: 10px;
    width: 50px;
    height: 300px;
    background: -webkit-gradient(linear, left top, left bottom, from(#0f0), to(#fa0));
    background: -moz-linear-gradient(top,  #0f0,  #fa0);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0f0', endColorstr='#fa0');
}

#outer > div {
    position: absolute;
    left: 35%;
    bottom: 0px;
    width: 30%;
    height: 90%;
    background-color: black;
}

jsfiddle