Как реализовать данную кнопку?

Question

[Mark]

Добрый вечер! У меня возникли проблемы с реализацией одной кнопки, помогите пожалуйста стилизовать ее:

Пробовал через before и after, но при уменьшении текста, они начинали сильно смещаться.

Comments

[Дмитрий Баскаков]

Всё правильно, через after и before нужно делать. Возможно, просто картинками, а возможно через overflow:hidden

Answer 1

[Антон Усачев]

Можно через transform для псевдоэлементов. Для достижения нужного наклона просто поиграться со значением skew.



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

width: 30%; transform: skewX(30deg); margin-left: -15%;

).

Comments

[Mark]

Спасибо за помощь!