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

Question

[PochemuIKak]

Как сделать вогнутый элемент с одной из сторон?
P.S. Через доп. элемент с position:absolute не подойдёт, под кнопкой изображение на фоне.

Comments

[iBird Rose]

сейчас уже мода искать решения таких моментов через css прошла. все делают это через svg

[PochemuIKak]

iBird Rose, просто выглядеть будет как кастыль.

[Rerurk]

Кто мешает картинку повесить?

[PochemuIKak]

Rerurk, тоже кастыль, мне просто интересно, можно ли сделать на обычном css.

[iBird Rose]

PochemuIKak, svg - это как раз так и не костыль. его можно воспринимать как более гибкая альтернатива div. работать в css с svg ты можешь также как и с div (вешать различные эвенты, менять цвета, использовать анимацию и пр.). но при этом в отличии от div ты можешь для svg задать любой вид

[PochemuIKak]

iBird Rose, ясно, спасибо.

Answer 1

[ksnk]

htmlbook.ru/css/border-image
Картинку с бордером можно нарисовать хоть в svg, но если png - в этом случае разумно будет примерно соответствовать средним размерам кнопок, чтобы при разных размерах не бросались в глаза артефакты при увеличении картинки

Comments

[PochemuIKak]

Через png это уже реально костыль. SVG самый оптимальный вариант, только такую адаптивную кнопку в svg не сделаешь, но результат более чем хорошим.

[ksnk]

PochemuIKak, https://jsfiddle.net/fxL76dsy/
Не так?
За картинку не пинать - я не художник :)
P.S.
https://jsfiddle.net/6awtpqdk/ - тут даже с тенью.