Как сделать кнопку такой фигурой?

Question

[mozhno]

С помощью каких свойств можно сделать кнопку вот такой фигурой?
Я пробовал clip-path, но он съедает рамку, а нужно именно чтобы фигура была с рамкой

Comments

[Ankhena]

Замените рамку на drop-shadow
Или сделайте svg фоном
Или нарисуйте градиентом

Answer 1

[Виталий Першин]

clip-path. Как раз есть пример с анимацией:

Answer 2

[its2easyy]

clip-path правильный вариант, только нужно его использовать два раза. У основной кнопки фон цвета рамки, к ней применяется clip-path первый раз. Внутри кнопки ещё один элемент с фоном цвета основного фона кнопки, этот внутренний элемент должен быть на 1px (или больше если рамка шире) меньше с каждой стороны. К этому элементу применяется второй clip-path с теми же размерами.
Внутренний элемент можно сделать например через

position: absolute;
top: 1px;
left: 1px;
right: 1px;
bottom: 1px;

Comments

[mozhno]

Да, такой вариант кстати самый приемлемый, чё-то я сразу до него не догадался. Спасибо!