html - 将 'Scale lines' 添加到 div 的一侧以充当 'divs contents' 的比例

Question

我目前有 this JsFiddle设计就像一个“秤”，可以直观地告诉我“水箱”何时装满。

(我使用了内部底部边框来实现 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-index 这样的东西会有所帮助，但即使是这个简单的任务似乎也超出了我的能力:(

即使我确实以某种方式解决了这个问题，我如何让线条在 div 的高度上均匀显示？

类似于:

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

请注意

我已经更新了 JSfiddle 以向您展示内容(它需要删除一些多余的 javascript)。实际上，百分比是根据我的模型数据计算得出的，而不是硬编码的。

Answer 1

您可以通过结合使用 css 渐变和 background-size 来创建缩放，而无需使用任何图像。

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

 .thermometer {
position:relative;
width:200px;
height:300px;
border-radius:30px;
overflow:hidden;
background:green;
}
.fluid {
position:absolute;
overflow:hidden;
width:100%;
bottom:0;
left:0;
background:blue;
box-shadow: 10px 10px 10px #393939;
}
.thermometer:after {
content:"";
z-index:1000;
width:50px;
height:100%;
position:absolute;
z-index:100;
right:0;
bottom:0;
background-image: -moz-linear-gradient(top, 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(125, 185, 232, 0) 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 1)), color-stop(4%, rgba(0, 0, 0, 1)), color-stop(5%, rgba(0, 0, 0, 0)), color-stop(14%, rgba(0, 0, 0, 0)), color-stop(72%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(125, 185, 232, 0)));
background-image: -webkit-linear-gradient(top, 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(125, 185, 232, 0) 100%);
background-image: -o-linear-gradient(top, 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(125, 185, 232, 0) 100%);
background-image: -ms-linear-gradient(top, 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(125, 185, 232, 0) 100%);
background-image: linear-gradient(to bottom, 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(125, 185, 232, 0) 100%);
background-size:5%;
}

<div class="thermometer">
<div class="fluid" style="height:40%"></div>
</div>