Как сделать кнопку в виде флажка из svg?

Question

[Gera11]

Как сделать такую кнопку?
Загвоздка в том чтобы в моб версии она уменьшалась.

Answer 1

[Moon Presence]

clip-path: polygon(100% 0, 100% 100%, 50% 50%, 0 100%, 0% 0%);

Или вот генератор Clip-Path.

Или рисовать SVG и делать из неё такую фигуру.

Или псевдоэлементами делать этот уголок. Но при наличии SVG и Clip-Path - такой подход выглядит не слишком круто. Однако вот генератор треугольников.

Comments

[Gera11]

а как сделать из div : before ? добавить div блоку просто углы снизу

[Moon Presence]

Gera11, вот вам генератор треугольников, пробуйте.

Answer 2

[Pashok Doom]

Рисуй в svg, в мобильной просто transform: scale(.8);