Html 添加'；刻度线'；在div的侧面用作'；divs目录'；

我目前的设计就像一个“秤”，当我的“油箱”满的时候，它能直观地告诉我

（我使用了一个内部底部边框来实现div中的第二种颜色，因此获取“其他颜色”不是这里的问题-可能不是最佳选择，但它很有效！）

div设置为500px高，我希望在侧面每隔10/20px有一条“刻度线”（类似于温度计）

一般来说，我对css/javascript/web设计不太在行，对于如何制作/创建类似于

我目前的css是：

.addDropShadowToTank{
     box-shadow: 10px 10px 10px #393939;
     border-radius:30px;
     display:table-cell;
     font-size:large;
     width:350px;
     height:500px;
     vertical-align:middle; 
     text-align:center; 
     background-color: #fa5858;
}

我在想类似Z指数的东西会有所帮助，但即使是这个简单的任务，我似乎也做不到：(

即使我设法做到了这一点，我如何使线条在div的高度上均匀地显示

比如：

 Current:            Wanted:
 +--------+          +--------+
 |        |          |       _|  <-- how to achieve this sort of scale design?
 |        |          |        |
 |        |          |       _|
 |        |          |        |
 |        |          |       _|
 |wwwwwwww|          |wwwwwwww|
 |    O   |          |    O  _|
 |  O     |          |  O     |
 |     o  |          |     o _|
 | o      |          | o      |
 +--------+          +--------+

当前：需要：
+--------+          +--------+
|| | | |您可以在不使用任何图像的情况下，通过将css渐变与背景大小结合使用来创建缩放

您只需调整
background size
属性以缩放背景-如果希望使
20px
行间距将px值更改为
20px
-解决方案是动态的


。温度计{
位置：相对位置；
宽度：200px；
高度：300px；
边界半径：30px；
溢出：隐藏；
背景：绿色；
}
.液体{
位置：绝对位置；
溢出：隐藏；
宽度：100%；
底部：0；
左：0；
背景：蓝色；
盒影：10px 10px 10px#393939；
}
.温度计：以后{
内容：“；
z指数：1000；
宽度：50px；
身高：100%；
位置：绝对位置；
z指数：100；
右：0；
底部：0；
背景图像：-莫兹线性梯度（顶部，rgba（0,0,0,1）0%，rgba（0,0,0,1）4%，rgba（0,0,0,0）5%，rgba（0,0,0,0）14%，rgba（0,0,0,0）72%，rgba（125185232,0）100%）；
背景图像：-webkit渐变（线性，左上，左下，颜色停止（0%，rgba（0，0，0，1）），颜色停止（4%，rgba（0，0，0，0，1）），颜色停止（5%，rgba（0，0，0，0，0）），颜色停止（14%，rgba（0，0，0，0，0）），颜色停止（100%，rgba（125，185，232，0））；
背景图片：-webkit线性渐变（顶部，rgba（0,0,0,1）0%，rgba（0,0,0,1）4%，rgba（0,0,0,0）5%，rgba（0,0,0,0）14%，rgba（0,0,0,0）72%，rgba（125185232,0）100%）；
背景图像：-o-线性梯度（顶部，rgba（0,0,0,1）0%，rgba（0,0,0,1）4%，rgba（0,0,0,0）5%，rgba（0,0,0,0）14%，rgba（0,0,0,0）72%，rgba（125185232,0）100%）；
背景图像：-ms线性梯度（顶部，rgba（0,0,0,1）0%，rgba（0,0,0,1）4%，rgba（0,0,0,0）5%，rgba（0,0,0,0）14%，rgba（0,0,0,0）72%，rgba（125185232,0）100%）；
背景图像：线性渐变（至底部，rgba（0,0,0,1）0%，rgba（0,0,0,1）4%，rgba（0,0,0,0）5%，rgba（0,0,0,0）14%，rgba（0,0,0,0）72%，rgba（125185232,0）100%）；
背景大小：5%；
}
这里有一种方法，你可以使用
：在
#myTank
元素上的
psuedo选择器之后，在其上应用一个图像背景，这将是使用Photoshop或任何其他图形软件创建的缩放图像

这是现场直播


var百分比=40；
var上限=100；
百分比=（百分比/上限）.toFixed（2）；
变量宽度=百分比*500；
document.getElementById（“myTank”）.style[“背景色”]=“绿色”；
document.getElementById（“myTank”）.style[“border bottom”]=宽度+“px纯蓝色”；
document.getElementById（“myTank”）.style[“height”]=500-width+“px”；
document.getElementById（“myPercentage”）.innerText=percent*100+“%”；
.addDropShadowToTank{
盒影：10px 10px 10px#393939；
边界半径：30px；
显示：表格单元格；
字体大小：大号；
宽度：350px；
高度：500px；
垂直对齐：中间对齐；
文本对齐：居中；
背景色：#fa5858；
}
我的坦克：在{
内容：''；
位置：绝对位置；
背景：url(http://s28.postimg.org/bclakfrvt/bars.png);
宽度：100%；
高度：440px；
background-repeat-x：无重复；
利润上限：-120px；
左边距：159px；
}

不使用图像创建初始比例线
为了避免使用图像，我最初使用生成了以下内容，用
#fa5858
填充背景，并在每10个百分位（从10到90）放置一个
#000
渐变：


这为我们提供了以下（有点难看）CSS（我也将其应用于您的应用程序）：


图{
高度：500px；
宽度：350px；
背景：#fa5858；/*旧浏览器*/
背景：-moz线性梯度最顶部，fa5858 8 8 8 8 0%，最顶部，fa5858 8 8 8 8 8 8 8 9%，ţFA589 9%，10亿10%，ţFA585858 11%，对fa5858 11%，ţfa5858 8 11%，最顶部，fa5858 8 8 8 8 8 8 8 8 8 0%，第5858 9 9 9 9%，；fa5858 9 9 9%、1010 10亿亿亿10%10%、10%的10%，，，，355858585858810 10 10 10 10%FA5810%10%10%10%10%10%10%FA588 11%、FA588 11%、FA588 11%，、FA58 11%，、fa5858 11%、fa5858 11%、FA58 11%、fa5858 11%11%、FA58 11%、FA58 11%，，，，，，，，对fa5858 11%11%联邦联邦58 11 fa5858 59%，#000000 60%，#fa5858 61%，#fa5858 69%，#000000 70%，#fa5858 71%，#fa5858 79%，#000000 80%，#fa5858 81%，#fa585889%，#000000 90%，#fa5858 91%，#fa5858 100%，#fa5858 100%；/*FF3.6+*/
背景：-webkit渐变（线性、左上、左下、颜色停止（0%、#fa5858）、颜色停止（9%、#fa5858）、颜色停止（9%、#fa5858）、颜色停止（10%、#000000）、颜色停止（11%、#fa5858）、颜色停止（19%、#fa5858）、颜色停止（20%、#000000）、颜色停止（21%、#fa5858）、颜色停止（29%、#fa5858）、颜色停止（30%、Ŧ颜色停止）、颜色停止（fa5858%）、颜色停止）颜色停止（40%，；颜色停止（41%，）颜色停止（41%，）颜色停止（41%，；fa5858），颜色停止（49%，；fa5858），颜色停止（49%，；fa5858），颜色停止（49%，；fa5858），颜色停止（49%，；fa5858），颜色停止（39%，）颜色停止（40%，）颜色停止（59%，）颜色停止（60%，58亿亿亿）、颜色停止（60%，、颜色停止（60%，、颜色停止（60%）、颜色停止（60%）、颜色停止（60%）、颜色停止（60%）、颜色停止）、颜色停止（61%，、颜色停止（61%，、颜色停止（61%，，，）颜色停止（61%，，，）颜色停止（61%，，，）颜色停止（61%，，，，）颜色停止），颜色停止（61%，，，，）颜色停止），颜色停止（61%，，，，）颜色停止（61%，，，，，，，，，，）58），停止（80%，#000000）颜色停止（81%），颜色停止（89%），颜色停止（90%），颜色停止（000000-