Как добавить «уголки» правильно?

Question

[amigo567]

Как правильно сделать такое во vue3? С такими уголками будут не только кнопки, но и формы, если использовать svg как background-image то svg не расширяется, если png то расширяется, но начинает плохо выглядеть

Пока так сделал, но как избавиться от лишнего уголка в конце и сделать более переиспользуемым (разного цвета уголки, разный внутренний отступ и т.д.)

vue sfc

spoiler

Comments

[Ivan Ustûžanin]

как вариант: специально скрафченная картинка и border-image

Answer 1

[ksnk]

Можно поизвращатся.
Вставить элемент с нужными границами и вырезать из него все ненужное
Ну или даже одним элементом