如何使用css转换横向对齐文本

Question

我希望div包含图片中显示的文字。

我已设法做到这一点。但我确信这不是正确的方法。

HTML

<div id = "bar">
<div class = "text">COMPETENCY</div>

的CSS

    #bar{
    height:200px;
    width:40px;
    background:dodgerblue;
    color:black;
    position:relative;
}

    .text{
         color:white;
        -webkit-transform:rotate(270deg);
        width:100%;
        position:absolute;
        top:100px;

    }

我已经使用此代码实现了此图像中的内容。但我需要一种更好的方法来执行此操作。可以帮助我解决此问题。

图像：

FIDDLE HERE

Answer 1

如果要简化标记并仅使用一个元素，可以执行以下操作：

<强> DEMO

HTML：

<div id = "bar">COMPETENCY</div>

CSS：

#bar{
    width:180px;
    height:40px;
    line-height:40px;
    text-align:right;
    padding-right:20px;
    background:dodgerblue;
    color:black;
    position:relative;
    color:white;

    -webkit-transform-origin : 100% 0;
    -ms-transform-origin : 100% 0;
    transform-origin : 100% 0;

    -webkit-transform:rotate(-90deg) translateY(-200px);
    -ms-transform:rotate(-90deg) translateY(-200px);
    transform:rotate(-90deg) translateY(-200px);
}

Answer 2

你也可以尝试另一种方法：

<强> HTML：

<div id = "bar">COMPETENCY</div>

<强> CSS：

#bar{
    padding: 0px 0px 0px 20px;
    background:dodgerblue;
    -webkit-transform:rotate(-90deg);
    color: white;
    width: 250px;
    height: 40px;
    line-height: 40px;
}

Demo