Добавить преобразование: перекосить только в контейнер, а не текст в пределах

Question

Есть ли способ преобразовать элемент, но не текст внутри этого элемента?

body { 
    font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif; 
    padding: 100px; 
    font-size: 13px; 
} 

div { 
    background: #fff; 
    margin: 0 auto; 
    width: 200px; 
    padding: 100px; 
    text-align: center; 
    /* border-radius */ 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
    /* box-shadow */ 
    -webkit-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px; 
    -moz-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px; 
    box-shadow: rgba(0,0,0,0.2) 0px 1px 3px; 
    -webkit-transform: skew(-20deg); 
    -moz-transform: skew(-20deg); 
    -o-transform: skew(-20deg); 
} 

(код - http://cssdesk.com/H7Awc)

Я несколько способов, включая добавив, прежде чем псевдо класса к нему, который работает в теории, но я добавляю эту навигацию на WordPress сайте и перечисленными выше может» t имеет положение: абсолютное. Вот код, используя до псевдо, который, как мне нужно, чтобы это выглядело, но без абсолютного

http://cssdesk.com/ALRrQ

Любая помощь будет оценена, спасибо.

Answer 1

Как я вижу, вы попытались сбросить перекос текста, добавив skew(20deg) в этот интервал. Но transform не относится к встроенным элементам в качестве диапазона.

Решение

span { 
    display:inline-block; /*important line*/ 
    -webkit-transform: skew(20deg); 
     -moz-transform: skew(20deg); 
     -o-transform: skew(20deg); 
} 

См Fiddle