Как сделать кнопку со скошенными углами?

Question

[Алекс]

Необходимо сделать вот такую кнопку


Вроде бы получилось, но границы всеровно не могу приделать. (какой-то крест еще появился когда на фидл выложил, у меня его нет). Если добавляю обертку тексту в виде span то потом не могу анимировать градиент у этого спана.

Подскажите может есть другой способ сделать данных эффект

Answer 1

[RAX7]

Чуть-чуть увеличь background-size: 50.2% 50.2%;, хром видимо криво переводит проценты background-size в пиксели.

Answer 2

[forspamonly2]

через border-image. в простых случаях градиентами, в сложных - с векторной картинкой.

Comments

[Алекс]

Все замечательно. Но по ходу в проекте столкнулся с тем что нужно и косой угол и градиентом залить кнопку. Вообще не могу представить как такое сделать.
Градиент такой

background-image: linear-gradient(to right, rgba(212, 20, 90, 0.5) 0%, rgba(251, 176, 59, 0.5) 99%, rgba(251, 176, 59, 0.5) 100%);

ps это только через svg возможно будет сделать? Прост думаю как будет с растяжением объекта такого. он ведь статический будет или ошибаюсь?