Question

我想为我的项目绘制一个带有css的垂直比例尺。请帮我。在这里你可以看到图像。

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&hovh=400&hovw=120&tx=78&ty=217&page=1&tbnh=128&tbnw=38&start=0&ndsp=18&ved=1t:429,r:1,s:0

如上图所示，我必须使用css和html进行绘制。

Answer 1

我想你可以尝试这样的事情。只需添加一些刻度标记。可以使用javascript /或服务器端输出动态设置内部条的高度。

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

相关小提琴：http://jsfiddle.net/sUeCn/

Answer 2

你可以试试这样的东西，它显示比例并用一个漂亮的渐变颜色填充比例尺

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

和以下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

如何用css绘制垂直比例尺

2 个答案: