Is It Possible to Create a Vertical Meter With HTML5?

Normally, if I creat开发者_运维知识库e:

<meter value="30" max="100">Low</meter>

I'll end up with a horizontal meter/bar if viewed on a browser that supports the html5 meter element.

Is it possible to create a vertical meter with html5?

The only solution I've been able to come up with so far is using CSS3 rotation (transform).

---

Yeah transform is the only way to do this..

-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);

---

Transform is the answer. The whole point of meter is that it's a semantic, not a presentational element and you should be able to style it however you want with CSS>

---

Using transform on the meter element has a major drawback which I have yet to find an elegant way around, it doesn't seem to change the amount of horizontal width the element requires. eg, for a meter with width 180px and height 15px transformed by 270deg, the meter will show as a vertical bar with height 180px and width 15px, but the bounding box ends up as 180x180 with a huge white space on the left side. Further CSS is then needed to reposition the element so the with gap is hidden. I've observed this behaviour on both Chrome and Firefox.