旋转标题CSS3

Question

Hello trustable StackOverflow用户，

我正在创建一个示例网页，并想知道如何延长在css3中延伸到页面外的旋转标题。如有必要，我可以提供更多代码。我会展示一张我正在寻找的图片，但是还没有积累足够的代表（只要有足够的代表来展示图片）...提前感谢您的帮助！

这就是我想要的：

'h4'是我试图伸长的标题，这就是我现在所做的：

h4 {
    color: #fbff00;
    background-color: #858585;
    -webkit-transform: rotate(315deg);
    -moz-transform: rotate(315deg);
    float:left;
    text-align:center;

    -webkit-box-shadow: 0px 0px 10px #d1cfd1;
    -moz-box-shadow: 0px 0px 10px #d1cfd1;
    box-shadow: 0px 0px 10px #d1cfd1;
   }

-Nate

Answer 1

this是否接近你想要的东西？

这个想法是：

• 为标题指定显式像素宽度（以管理其“大小”）
• 给它一个负的左边距以使其拥抱左边缘（数量取决于给定的宽度）
• 给它一个正左边填充以让文本自然定位（也取决于给定的宽度）