Как сделать такую кнопку?

Question

[dzho]

Всем привет тренируюсь с макетами, попалась такая кнопка не могу понять как сделать чтоб текст не оставался
трансформирован. Пытался делать с transform: skew(... );

Answer 1

[Максим]

transform: skew

https://jsfiddle.net/sos3t580/1/

Answer 2

[Ivan Ukhov]

С помощью псевдоэлементов :after и :before которые будут 2мя трапециями со свойством transform: skew
codepen.io/Ukhov/pen/gwxOmG

.btn:before {
content: '';
position: absolute;
background: black;
width: 50px;
height: 80px;
right: -30px;
bottom: 0px;
transform: skew(-20deg);
z-index: 5;
}

.btn {
position: relative;
width: 200px;
height: 80px;
background: black;
z-index: 10;
}

Comments

[Ivan Ukhov]

Чуть-чуть я ошибся)