Элемент с абсолютным положением повернут в правый угол

Я пытаюсь выяснить, как сделать вкладку корзины покупок, которая будет расположена в правом углу, а также повернется на 90 градусов. Вращение, естественно, смешивает положение, но, возможно, существует обходной способ обертывания для разных оберток и т.д.

Дополнительные точки, если нет необходимости определять ширину. Мне не нужны старые браузеры

Ответ 1

Как насчет использования transform-origin? См. DEMO.

Соответствующий CSS:

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

Ответ 2

Ответ Ana превосходный и указал мне в правильном направлении, но я понял, что вы можете достичь такого же эффекта, не указывая явно высоту, высоту линии и позицию для элемента, который вы хотите переместить, вместо этого просто установите translate(0, -100%):

body {
  margin: 0;
}

#box {
  position: relative;
}

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

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