Повернутый заголовок CSS3

Question

Здравствуйте, надежные пользователи 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

Приближается ли это к тому, что вы хотите?

Идея такова:

• Дайте заголовку явную ширину в пикселях (чтобы управлять его размером)")
• Придайте ему отрицательное левое поле, чтобы он обнимал левый край (величина зависит от заданной ширины)
• Придайте ему положительный левый отступ, чтобы текст располагался естественным образом (также зависитпо ширине дано)