values-vertical-rtl-ref.html (5626B)
1 <!DOCTYPE html> 2 <html> 3 <link rel='stylesheet' type='text/css' href='style.css'> 4 <style> 5 div:nth-child(1) > .meter-bar { position: relative; top: 0%; height: 100%; } 6 div:nth-child(2) > .meter-bar { position: relative; top: 100%; height: 0%; } 7 div:nth-child(3) > .meter-bar { position: relative; top: 90%; height: 10%; } 8 div:nth-child(4) > .meter-bar { position: relative; top: 50%; height: 50%; } 9 div:nth-child(5) > .meter-bar { position: relative; top: 100%; height: 0%; } 10 div:nth-child(6) > .meter-bar { position: relative; top: 0%; height: 100%; } 11 div:nth-child(7) > .meter-bar { position: relative; top: 58%; height: 42%; } 12 div:nth-child(8) > .meter-bar { position: relative; top: 0%; height: 100%; } 13 div:nth-child(9) > .meter-bar { position: relative; top: 0%; height: 100%; } 14 div:nth-child(10) > .meter-bar { position: relative; top: 90%; height: 10%; } 15 div:nth-child(11) > .meter-bar { position: relative; top: 62.5%; height: 37.5%; } 16 div:nth-child(12) > .meter-bar { position: relative; top: 0%; height: 100%; } 17 div:nth-child(13) > .meter-bar { position: relative; top: 0%; height: 100%; } 18 div:nth-child(14) > .meter-bar { position: relative; top: 100%; height: 0%; } 19 div:nth-child(15) > .meter-bar { position: relative; top: 45%; height: 55%; } 20 div:nth-child(16) > .meter-bar { position: relative; top: 50%; height: 50%; } 21 div:nth-child(17) > .meter-bar { position: relative; top: 80%; height: 20%; } 22 div:nth-child(18) > .meter-bar { position: relative; top: 90%; height: 10%; } 23 div:nth-child(19) > .meter-bar { position: relative; top: 90%; height: 10%; } 24 div:nth-child(20) > .meter-bar { position: relative; top: 80%; height: 20%; } 25 div:nth-child(21) > .meter-bar { position: relative; top: 62.5%; height: 37.5%; } 26 div:nth-child(22) > .meter-bar { position: relative; top: 90%; height: 10%; } 27 div:nth-child(23) > .meter-bar { position: relative; top: 90%; height: 10%; } 28 div:nth-child(24) > .meter-bar { position: relative; top: 90%; height: 10%; } 29 div:nth-child(25) > .meter-bar { position: relative; top: 50%; height: 50%; } 30 div:nth-child(26) > .meter-bar { position: relative; top: 80%; height: 20%; } 31 div:nth-child(27) > .meter-bar { position: relative; top: 10%; height: 90%; } 32 div:nth-child(28) > .meter-bar { position: relative; top: 90%; height: 10%; } 33 div:nth-child(29) > .meter-bar { position: relative; top: 90%; height: 10%; } 34 div:nth-child(30) > .meter-bar { position: relative; top: 90%; height: 10%; } 35 div:nth-child(31) > .meter-bar { position: relative; top: 90%; height: 10%; } 36 </style> 37 <body dir='rtl'> 38 <div class="meter-element vertical"> 39 <div class="meter-bar"> 40 </div> 41 </div> 42 <div class="meter-element vertical"> 43 <div class="meter-bar"> 44 </div> 45 </div> 46 <div class="meter-element vertical"> 47 <div class="meter-bar"> 48 </div> 49 </div> 50 <div class="meter-element vertical"> 51 <div class="meter-bar"> 52 </div> 53 </div> 54 <div class="meter-element vertical"> 55 <div class="meter-bar"> 56 </div> 57 </div> 58 <div class="meter-element vertical"> 59 <div class="meter-bar"> 60 </div> 61 </div> 62 <div class="meter-element vertical"> 63 <div class="meter-bar"> 64 </div> 65 </div> 66 <div class="meter-element vertical"> 67 <div class="meter-bar"> 68 </div> 69 </div> 70 <div class="meter-element vertical"> 71 <div class="meter-bar"> 72 </div> 73 </div> 74 <div class="meter-element vertical"> 75 <div class="meter-bar"> 76 </div> 77 </div> 78 <div class="meter-element vertical"> 79 <div class="meter-bar"> 80 </div> 81 </div> 82 <div class="meter-element vertical"> 83 <div class="meter-bar"> 84 </div> 85 </div> 86 <div class="meter-element vertical"> 87 <div class="meter-bar"> 88 </div> 89 </div> 90 <div class="meter-element vertical"> 91 <div class="meter-bar"> 92 </div> 93 </div> 94 <div class="meter-element vertical"> 95 <div class="meter-bar"> 96 </div> 97 </div> 98 <div class="meter-element vertical"> 99 <div class="meter-bar"> 100 </div> 101 </div> 102 <div class="meter-element vertical"> 103 <div class="meter-bar"> 104 </div> 105 </div> 106 <div class="meter-element vertical"> 107 <div class="meter-bar"> 108 </div> 109 </div> 110 <div class="meter-element vertical"> 111 <div class="meter-bar"> 112 </div> 113 </div> 114 <div class="meter-element vertical"> 115 <div class="meter-bar"> 116 </div> 117 </div> 118 <div class="meter-element vertical"> 119 <div class="meter-bar"> 120 </div> 121 </div> 122 <div class="meter-element vertical"> 123 <div class="meter-bar"> 124 </div> 125 </div> 126 <div class="meter-element vertical"> 127 <div class="meter-bar"> 128 </div> 129 </div> 130 <div class="meter-element vertical"> 131 <div class="meter-bar"> 132 </div> 133 </div> 134 <div class="meter-element vertical"> 135 <div class="meter-bar"> 136 </div> 137 </div> 138 <div class="meter-element vertical"> 139 <div class="meter-bar"> 140 </div> 141 </div> 142 <div class="meter-element vertical"> 143 <div class="meter-bar"> 144 </div> 145 </div> 146 <div class="meter-element vertical"> 147 <div class="meter-bar"> 148 </div> 149 </div> 150 <div class="meter-element vertical"> 151 <div class="meter-bar"> 152 </div> 153 </div> 154 <div class="meter-element vertical"> 155 <div class="meter-bar"> 156 </div> 157 </div> 158 <div class="meter-element vertical"> 159 <div class="meter-bar"> 160 </div> 161 </div> 162 </body> 163 </html>