|
1 <!DOCTYPE html> |
|
2 <html> |
|
3 <link rel='stylesheet' type='text/css' href='style.css'> |
|
4 <style> |
|
5 .progress-element { margin: 10px; } |
|
6 body > div:nth-child(1) > .progress-bar { position: relative; top: 4px; left: 4px; |
|
7 height: -moz-calc(100% - 8px); } |
|
8 body > div:nth-child(2) > .progress-bar { } |
|
9 body > div:nth-child(3) > .progress-bar { position: relative; top: 4px; left: 4px; |
|
10 height: -moz-calc(100% - 8px); } |
|
11 body > div:nth-child(4) > .progress-bar { position: relative; top: 10px; height: -moz-calc(100% - 10px); } |
|
12 body > div:nth-child(5) > .progress-bar { } |
|
13 body > div:nth-child(6) > .progress-bar { height: -moz-calc(100% - 10px); } |
|
14 body > div:nth-child(7) > .progress-bar { position: relative; left: 10px; } |
|
15 body > div:nth-child(8) > .progress-bar { } |
|
16 body > div:nth-child(9) > .progress-bar { } |
|
17 body > div:nth-child(10) > .progress-bar { } |
|
18 body > div:nth-child(11) > .progress-bar { } |
|
19 /* 12 - 15 should have 100% width, no need to specify. */ |
|
20 body > div:nth-of-type(16) > .progress-bar { position: relative; top: 64px; |
|
21 left: -moz-calc(100% + 128px + 32px ); |
|
22 height: -moz-calc(100% - 32px); |
|
23 width: -moz-calc(100% + 128px - 1em); } |
|
24 </style> |
|
25 <body dir='rtl'> |
|
26 <div class="progress-element vertical"> |
|
27 <div class="progress-bar"> |
|
28 </div> |
|
29 </div> |
|
30 <div class="progress-element vertical"> |
|
31 <div class="progress-bar"> |
|
32 </div> |
|
33 </div> |
|
34 <div class="progress-element vertical"> |
|
35 <div class="progress-bar"> |
|
36 </div> |
|
37 </div> |
|
38 <div class="progress-element vertical"> |
|
39 <div class="progress-bar"> |
|
40 </div> |
|
41 </div> |
|
42 <div class="progress-element vertical"> |
|
43 <div class="progress-bar"> |
|
44 </div> |
|
45 </div> |
|
46 <div class="progress-element vertical"> |
|
47 <div class="progress-bar"> |
|
48 </div> |
|
49 </div> |
|
50 <div class="progress-element vertical"> |
|
51 <div class="progress-bar"> |
|
52 </div> |
|
53 </div> |
|
54 <div class="progress-element vertical"> |
|
55 <div class="progress-bar"> |
|
56 </div> |
|
57 </div> |
|
58 <div class="progress-element vertical"> |
|
59 <div class="progress-bar"> |
|
60 </div> |
|
61 </div> |
|
62 <div class="progress-element vertical"> |
|
63 <div class="progress-bar"> |
|
64 </div> |
|
65 </div> |
|
66 <div class="progress-element vertical"> |
|
67 <div class="progress-bar"> |
|
68 </div> |
|
69 </div> |
|
70 <div class="progress-element vertical"> |
|
71 <div class="progress-bar"> |
|
72 </div> |
|
73 </div> |
|
74 <div class="progress-element vertical"> |
|
75 <div class="progress-bar"> |
|
76 </div> |
|
77 </div> |
|
78 <div class="progress-element vertical"> |
|
79 <div class="progress-bar"> |
|
80 </div> |
|
81 </div> |
|
82 <div class="progress-element vertical"> |
|
83 <div class="progress-bar"> |
|
84 </div> |
|
85 </div> |
|
86 <br><div class="progress-element vertical"> |
|
87 <div class="progress-bar"> |
|
88 </div> |
|
89 </div> |
|
90 </body> |
|
91 </html> |