html - Rotated Header CSS3 -

hello trusty stackoverflow users,

i creating sample webpage , wondering how elongate rotated header extends off page in css3. can provide more code if necessary. show picture of looking haven't accumulated enough rep (just got enough rep show picture)... in advance!

here want:

'h4' header i'm trying elongate , here have 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 want?

the idea is:

• give header explicit pixel width (to manage "size")
• give negative left margin make hug left edge (amount dependent on width given)
• give positive left padding let text positioned naturally (also dependent on width given)