绝对位置旋转元素右转角

Question

我试图弄清楚如何使购物车选项卡，将位于右侧角落，也旋转90度。旋转自然混合的位置，但也许有包装不同包装等的解决办法....

额外的点，如果有就不需要定义宽度。我不在乎旧版浏览器

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

Answer 2

Ana's answer非常好，我指出了正确的方向，但我意识到，你可以达到同样的效果，而无需显式设置高度，行高度和位置的元素要移动 - 相反，刚刚成立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>

...和一个jsFiddle为好措施。