CODEWITHSUNDEEP
htmlcss
Nathan Moraton
Nathan Moraton

Reputation: 58

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:

enter image description here

'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

Upvotes: 3

Views: 404

Answers (1)

Jon
Jon

Reputation: 437654

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)

Upvotes: 4

Related Questions