将列表项增长为图形

Question

我有一个列表，列表项使用JavaScript动态增长，直到100％。这有效。 但我希望它看起来像this

所以这里的问题是。我怎样才能让它们成长为顶峰。我尝试了身高，但随后他们逐渐成长。使用CSS旋转它们并不真正有效，因为添加的列表项越多，列表移动到底部的次数就越多......

有没有人有任何想法？

谢谢！

Answer 1

对li - 元素使用绝对定位。例如：

http://jsfiddle.net/J5pB7/

ul{
    height:300px;
    border:1px solid #666;
    position:relative;
}
li{
    display:inline-block;
    width:20px;
    position:absolute;
    bottom:0px;
    background-color:green;
}
#a{
    height:50%;
    margin-left:30px;
}
#b{
    margin-left:80px;
    height:10%;
}
#c{
    margin-left:130px;
    height:90%
}