posición absoluta elemento girado a la esquina derecha

Question

Im tratando de averiguar cómo hacer que la pestaña del carrito de compras que se colocará en la esquina derecha y también se giró 90 grados. La rotación mezcla de forma natural la posición, pero tal vez hay una solución alternativa de envoltura para diferentes envolturas, etc.

Puntos extra si no es necesario definir el ancho. No me importan los navegadores más antiguos

Answer 1

¿Qué le parece usar transform-origin? Ver DEMO.

CSS relevante:

#box { 
    position: relative; 
} 
.bg { 
    right: 40px; /* same as height */ 
    height: 40px; 
    transform: rotate(-90deg); 
    transform-origin: 100% 0; 
    position: absolute; 
    line-height: 40px; /* same as height, for vertical centering */ 
} 

Answer 2

Ana's answer es excelente y me señaló en la dirección correcta, pero se dio cuenta de que podría lograr el mismo efecto sin tener que establecer explícitamente la altura, la línea de altura y posición para el elemento que desea mover - en su lugar, acaba de establecer translate(0, -100%):

body { 
 
    margin: 0; 
 
} 
 

 
#box { 
 
    position: relative; 
 
} 
 

 
.bg { 
 
\t right: 0; 
 
\t padding: 1em; 
 
\t transform: rotate(-90deg) translate(0, -100%); 
 
\t transform-origin: 100% 0; 
 
\t position: absolute; 
 
\t background: #FF1493; 
 
}

<div id="box"> 
 
\t <div class="bg">   
 
\t \t <div class="txt">He's not the Messiah. He's a very naughty boy.</div> 
 
\t </div> 
 
</div>

... y un jsFiddle para una buena medida.