旋转的头CSS3

你好值得信赖的StackOverflow用户，旋转的头CSS3

我创建一个示例网页，并想知道如何拉长，在CSS3扩展超出页面旋转头。如有必要，我可以提供更多代码。我会显示我正在寻找的图片，但没有积累足够的代表（只是得到足够的代表来显示图片）...感谢您提前提供任何帮助！

这里是我想：

enter image description here

'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

来源

2011-04-28 Nathan Moraton

this是否接近你想要的？

的理念是：

给所述报头中的显式像素宽度（以管理它的“尺寸”）
给它一个负左边距，使其紧靠着左边缘（量依赖于宽度给定）
给它一个正面左填充，让文字自然定位（也取决于宽度给出）

来源

2011-04-28 21:53:33 Jon

感谢乔恩这正是我一直在寻找！ – 2011-04-28 21:55:10

还有一件事：如果我想弥补浏览器大小的变化，该怎么办？我需要使用百分比吗？ – 2011-04-28 22:01:23

@NathanMoraton：不幸的是，我不能想到一种方法可以让标题的大小（也必须是位置）取决于页面的宽度，同时保持文本居中。 – Jon 2011-04-28 22:07:12

回答

相关问题