CSS: prawo wyrównać pionowo obrócony tekst

Question

I nie wydaje się wyrównać obrócona w pionie div całą drogę do prawej strony: http://jsfiddle.net/F23W2/2/

HTML:

<div class="vertical">Vertical Text</div> 

CSS:

.vertical { 
    position: relative; 
    background-color: #DDDDDD; 
    padding: 10px; 
    border-radius: 5px 5px 0 0; 
    float: right; 
    -moz-transform: rotate(270deg); /* FF3.5+ */ 
    -o-transform: rotate(270deg); /* Opera 10.5 */ 
    -webkit-transform: rotate(-90deg); /* Saf3.1+, Chrome */ 
} 

• Istnieje niepożądany margines stworzony między prawą stronę granicy i div.
• Górna część obróconego elementu div zostaje przycięta.

Chociaż mogę używać ujemnych marginesów do pracy, zastanawiałem się, czy istnieje czystsze rozwiązanie.

Answer 1

Zmień pochodzenie obrotu przekształcić poprzez transform-origin: 100% 100%;
New Fiddle