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

Question

[froggush]

Здравствуйте, есть кнопка с таким дизайном:


Как её сверстать? Через skew() не получается, т.к. текст тоже "перекашивает".

Answer 1

[nvdfxx]

<a href=""><span>click</span></a>

a {
  display: inline-block;
  padding: 10px;
  background: red;
  transform: skew(10deg);
  border-radius: 4px
}

a span {
  display: inline-block;
  transform: skew(-10deg);
  color: #fff;
}

Answer 2

[Stalker_RED]

Можно background-clip, или таки skew

Answer 3

[Шохрух Шаймардонов]

Используйте :after/:before и "вырежте из них 3угольники".

З.ы. геометрические фигуры на css в гугле даст вам подсказку

Answer 4

[Антон]

https://stackoverflow.com/questions/13591584/slant...
https://stackoverflow.com/questions/17947565/how-t...