Как сверстать такую (неровный край) кнопку?

Question

[Александр Панков]

Здравствуйте!
вот:


Тут фон понятно - градиент, но вот эту стрелочку как сделть?

пытался через border к блоку after,

content: '';
  width: 0;
  height: 0;
  border-top: 24px solid transparent;
  border-bottom: 24px solid transparent;
  border-left: 12px solid #2772a1; /* а должен быть градиент*/
  position: absolute;
  right: -12px;

но опять же градиент бордеру не указать...

Не подскажите как правильно поступить в таком случае???

Comments

[Евгений Петров]

Про рамку и градиент — первоапрельская шутка?)

[Александр Панков]

что?
вроде не шутил )))

[Александр Панков]

Сергей: спасибо, но не получилось тоже, из-за треугольника из бордеров, тк там 3 бордера и 2 из них транспарент, а border-image перекрывает свойство прозрачности и получается нужный фон - но прямоугольник - а не треугольник (переопределяет транспарент)

Answer 1

[Михаил Лялин]

habrahabr.ru/company/paysto/blog/251933

Comments

[Александр Панков]

Спасибо, будет полезно, но решения мойй проблемы там нет, а так же говорят, что это очень мудрёно

Answer 2

[Андрей]

В таком случае принято верстать с картинками.
Техника придумана еще в прошлом тысячелетии — sliding doors

Answer 3

[egor_nullptr]

jsfiddle.net/aokhtjhs