Как сверстать такую кнопку?

Question

[Sergey750il]

Доброго времени суток. Подскажите, пожалуйста, как верстают такие кнопки на чистом CSS?

Answer 1

[RAX7]

Answer 2

[Артем Золин]

Вы можете реализовать подобное через border-radius, тут демо

Comments

[Vadim Rublev]

Не выходит, однако...
Надо сделать наклонную прямую (вертикаль трапеции); и её вверху скруглить. Скруглить - ок; а вот наклонную вертикаль нечем сделать.

Answer 3

[Артём Пешков]

Скорее всего на вашем примере просто png картинка. В CSS сложное искривление с тенью под ним вроде бы нельзя сделать. Еще вариант - SVG, с ним в принципе возможно вообще все что угодно, например: https://codepen.io/leenalavanya/pen/aXMXvz

Comments

[Максим]

А что там просто прямоугольник ?

[Артём Пешков]

Много Чего, вы на микроволновке смотрите что ли ))

[Максим]

Артём Пешков, обычный файерфокс, с самыми последними обновлениями

Answer 4

[Сергей delphinpro]

Если фон одноцветный, разделите кнопку на геометрические примитивы и соберите из них.
Навскидку, здесь скругленный прямоугольник и треугольники. Как вариант — прямоугольник, треугольники и круги.
Есть еще варианты:
- нарисовать подложку градиентами на фоне прямоугольной кнопки
- использовать clip-path