縦向きのCSS/HTML5プログレスバー

Question

私は縦棒のように種類をパーセントで変えることができますが、これを使用するには横型のものを使用することに成功しました：CSS Progress Bar今はそれをエミュレートしたいと思っています。

Is there a way that I can do this。

これは、垂直バーのコードです：これは、何が必要である場合、私は知らない

<div class="score"> 
<div id="test" class="score-completed" style="height:80;"> 
<div>&nbsp;</div> 
</div> 
</div> 

.score { 
width:34px; 
height:141px; 
background: url(/assets/images/accordion/score.png) no-repeat 0 0px; 
} 
.score-completed { 

width:26px; 
margin-left: -1px; 
background: url(/assets/images/accordion/score.png) no-repeat 1px 0; 
} 
.score-completed div { 
float: right; 
height: 50%; 
width:26px; 
margin:99px 1px 0 0; 
background: url(/assets/images/accordion/score.png) no-repeat 100% 100%; 
display: inline; /* IE 6 double float bug */ 
} 

Answer 1

私はなぜ表示されませんあなた自身でビルドするべきではありません。以下は私の試みですが、IEでテストされていませんが、すべての現代的なブラウザで動作するはずです：

#outer { 
    width: 30px; 
    height: 140px; 
    overflow: hidden; 

    position: relative; 
} 

#inner, #inner div { 
    width: 100%; 
    overflow: hidden; 
    position: absolute; 
} 

#inner { 
    bottom: 0; 
    height: 0%; 
} 

#inner div { 
    top: 0; 
    width: 100%; 
    height: 5px; 
} 

ここでの基本的な考え方は、バーの各要素を位置に移動するために絶対的に配置されたdivを使用することです。top: 0で進行方向バーの上端に位置する丸い頂点を得るための最上部のdivプログレスバー自体は下に一直線に並んでいますbottom: 0。

ここでは、簡単なデモをhttp://www.jsfiddle.net/sNLXn/に設定しました。デモでは、境界線と背景を使ってプログレスバーを表示していますが、実際には画像を使用する必要があります。

Answer 2

しかし：

あなたは（パーセントからCSSルール.score-completedのdivの高さを変更することができます現在の50％）をpx（この例では40ピクセル）で固定高さに設定します。次に、緑色のバーを大きくしなければならないときは、高さにピクセルを追加し、マージンから同じ量のピクセルを削除することができます（現在は99ピクセルです）。

例えば、高さを49pxにするには、余白を90px（高さを追加したため-9ピクセル）にする必要があります。

編集：バーで各divにidを追加してからCSSルールを作成できます。例えば

：あなたの.score-completed divから99px例えば、各バーのための新しいCSSルールを作成します：

<div class="score"> 
<div id="test" class="score-completed" style="height:80;"> 
<div id="first">&nbsp;</div> 
</div> 
</div> 
<div class="score"> 
<div id="test" class="score-completed" style="height:80;"> 
<div id="second">&nbsp;</div> 
</div> 
</div> 

その後、あなたは高さと余裕を削除

#first {margin:99px 1px 0 0; height:40px; } 
#second {margin:90px 1px 0 0; height:49px; }