Этот хитрый skew

[Evkaky]

Хочу сделать кнопку со скошенными сторонами. Казалось бы, 

.knopa {   ​transform: skew(15deg);}

идеально подходит для этого. Но...вместе со сторонами скашивается и сам текст кнопки, что, в общем-то, логично, но это не то, что мне нужно. Единственное, что приходит в голову - это сделать элемент-обертку для текста внутри кнопки и ему задать противположный skew, т.е. на -15deg, что бы уравновесить скос для текста.

Но мне не нравится идея создавать лишний элемент каждый раз, когда нужно сделать скошеный элемент с нескошеным контентом.

Что можете посоветовать? SVG? Или может в спецификации css уже есть модуль, для создания элементов любых (хотя бы, остроконечных) форм?

[SelenIT]

Как вариант, можно подложить под текст кнопки абсолютно позиционированный ::before, и применить трансформацию к нему. Модуля для произвольных форм в CSS пока, насколько мне известно, нет (CSS Shapes — это не про рисование форм, а про заполнение текстом произвольных контуров, да и его поддержка пока только экспериментальная).

[Radiocity]

С помощью псевдоклассов добавить 15° углы. Проблема в том, что у input и button их нет.

http://jsfiddle.net/rTJG8/

Edited January 3, 2014 by Radiocity

[SelenIT]

Только псевдоэлементов И у button они есть.