Rotated Header CSS3

Hello trusty StackOverflow users,

I am creating a sample webpage and was wondering how to elongate a rotated header that extends off the page in css3. I can provide more code if necessary. I would show a picture of what i am looking for but haven't accumulated enough rep (Just got enough rep to show a picture)... Thanks for any help in advance!

Here is what i want:

'h4' is the header i'm trying to elongate and here is what i have it doing now:

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

---

Does this come close to what you want?

The idea is:

• Give the header an explicit pixel width (to manage its "size")
• Give it a negative left margin to make it hug the left edge (amount dependent on width given)
• Give it a positive left padding to let the text be positioned naturally (also dependent on width given)