在div的右下角旋转文本

Question

我在div中有一些文本，它也在div中，因为它周围有一个双边框。

你可以在这里看到它：http://jsfiddle.net/43y46/

我想在其右下角放置一个90°的文字。

这样的事情：

我的旋转文字应该放在屏幕截图的蓝色空间中。

你能帮助我吗？

感谢。

Answer 1

正如所讨论的那样here将此样式用于文本范围。

.rotate {

/* Safari */
-webkit-transform: rotate(90deg);

/* Firefox */
-moz-transform: rotate(90deg);

/* IE */
-ms-transform: rotate(90deg);

/* Opera */
-o-transform: rotate(90deg);

/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);

}

Answer 2

完成！ ：）

http://jsfiddle.net/43y46/1/

Answer 3

这样的东西？

http://jsfiddle.net/43y46/5/

Answer 4

这是我的解决方案

<div id="content">                
    <div class="outer-gray"> 
        <div class="inner-gray">                 
            @RenderBody()
            <div class="rotate">Text rotated here</div>
        </div>                        
    </div>
</div>

和CSS

.rotate
{    
    position: absolute;
    right: -20px;
    bottom: 5px;    
    font-size: 10px;
    color: #cccccc;
    padding-top: 70px;

    /* Safari */
    -webkit-transform: rotate(-90deg);
    /* Firefox */
    -moz-transform: rotate(-90deg);
    /* IE */
    -ms-transform: rotate(-90deg);
    /* Opera */
    -o-transform: rotate(-90deg);
}