Как обрезать кнопку, чтобы осталась граница?

Question

[ivan_ivanov_ivanych]

Добрый день!
Может кто сталкивался с подобным. Мне нужно сделать кнопку с округленным border, при этом обрезанную в одном углу, и эти углы тоже округленные.


Я уже пробовал clip-path - но он обрезает элемент, во-первых резко, во-вторых вместе с border и box-shadow.
Так же пробовал с before и after поколдовать, но пока тоже безуспешно.
Заранее благодарю за ответ!

Comments

[Максим]

Нарисуйте в свг там тоже можно клик сделать и это обычный html тег и обрабатывается так же как и лбьой другой тег

[imko]

https://developer.mozilla.org/en-US/docs/Web/CSS/s... ?

Answer 1

[sewaca]

Если честно, я бы лишний раз не шаманил и просто сделал бы рамочку с помощью before и background-image (экспортнуть рамочку в svg)
Вариант Mors Clamor с polygon в целом правильнее, но конкретно в случае border'a, насколько я помню, он просто обрежет рамку. В общем попробуйте сначала его вариант.
Если не получится, можете использовать мой вариант :)

Answer 2

[Mors Clamor]

смотрите в сторону CSS свойства polygon

Comments

[ivan_ivanov_ivanych]

polygon не совсем подходит для этого, во-первых нужно плавное обрезаени, во-вторых, border и box-shadow так же обрезаются