CSS: destro allineare un testo verticalmente ruotato

Non riesco ad allineare un div verticale ruotata tutta la strada sul lato destro della pagina: http://jsfiddle.net/F23W2/2/CSS: destro allineare un testo verticalmente ruotato

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 */ 
}

C'è margine indesiderato creato fra le pagine bordo destro e il div.
La parte superiore del div ruotato viene ritagliata.

Anche se posso usare margini negativi per aggirare, mi chiedevo se esiste una soluzione più pulita.

fonte

2013-09-03 rajivRaja

modificare l'origine della rotazione trasformare via transform-origin: 100% 100%;
New Fiddle

fonte

2013-09-03 20:49:11 BigMacAttack

Che cosa succede se si desidera che il testo da leggere da cima a fondo? –

@ClintPachl Ecco un modo: http://jsfiddle.net/4078ggjg/. Sono sicuro che c'è un modo "più pulito", ma non ho avuto il tempo di semplificare le rotazioni, le traduzioni e il ridimensionamento. – BigMacAttack

Questo è un serio CSS-FU @BigMacAttack! Grazie per avermi indicato nella giusta direzione. Usando ciò che hai avuto, ho trovato un modo più pulito che funziona su browser (FF, Chrome, Safari) su Win (anche IE11), OSX, iOS e BSD: https://jsfiddle.net/yrfm5uec/1/ –

CSS: destro allineare un testo verticalmente ruotato

risposta

Problemi correlati