右から左から左へ進行中のバーの幅を高めます

Question

進行バーは、幅を広げると左から右に向かっています。0％のように、それは私のバーの左側にあり、それは私のバーの極めて右側です。

私は私の進歩性を「右から左に成長」させることができるような方法であるならば、 "-100％"のようなものです。

これは私のHTMLコードです：

<div class="completion-bar1-wraper">
    <div class="completion-bar1"></div>
</div>

.

とCSS：

div.completion-bar1-wraper{
    height: 12px;
    border: 1px solid #aaa;
    border-radius: 7px;
    background: #eee;
    box-shadow: 0px 0px 5px 0px #C2C2C2 inset;
    margin-right: 4%;
    margin-left: 3%;
    margin-top: 19%;
}
div.completion-bar1{
    height: 8px;
    margin: 1px;
    border-radius: 7px;
    background: #cf7400;
    width: 70%;
}

.

私は私のバーでもフィドルを設定しました：プログレスバー

Answer 1

位置決めで簡単に行うことができます。Containerをposition: relative;に設定し、プログレスバーを絶対に位置決めしてから、コンテナの右端に対してそれを配置するようにright: 0;を指定します。

div.completion-bar1-wraper {
   /*...*/
    position: relative;
}

div.completion-bar1 {
   /*...*/
    width: 70%;
    position: absolute;
    right: 0;
}

.

これは fiddle

です。

Answer 2

これを行うには多くの方法がありますので、質問に答えるために、はい。 私はあなたのコードをちょっと調整し、次のようにわずかに調整しました： http://jsfiddle.net/adamfullen/69mj8/

div.completion-bar1-wraper{
    height: 12px;
    border: 1px solid #aaa;
    border-radius: 7px;
    background: #eee;
    box-shadow: 0px 0px 5px 0px #C2C2C2 inset;
    margin-right: 4%;
    margin-left: 3%;
    margin-top: 19%;
    position: relative;
}
div.completion-bar1{
    position: absolute;
    right:0;
    height: 8px;
    margin: 1px;
    border-radius: 7px;
    background: #cf7400;
    width: 70%;
}

.

Answer 3

完了bar1を編集してから次の

div.completion-bar1{
    float: right;
    height: 8px;
    margin: 1px;
    border-radius: 7px;
    background: #cf7400;
    width: 70%;
}

.