Как сверстать элемент такой формы?

Question

[zulf4]

Дизайнер явно был не в адеквате, но мне стало интересно возможно ли сверстать подобное без костылей?

Comments

[Вадим]

Геморно, но можно.
Хотя с внутренней "рамкой", которая бежевая, скорее всего будут проблемы.
Ну это если без свг.

[Ankhena]

Самое простое: по старинке с помощью 3 bg image (в svg). Ну или двух и градиента. Это если эта штука симметрична и справа аналогично.

Или вообще одной, если размеры точно не меняются. (Я бы не рисковала, потому что не верю в неизменяемость размеров :) )

Answer 1

[Евгений Винокуров]

Сверстать - сложно. Если это кнопка, то можно псевдоэлементами ::before, ::after наложить. В общем и целом, такие "округлости" через CSS можно делать, но это clip-path нужен, пару раз делал с помощью него анимированные бэкграунды (тоже по нужде дизайнеров) - удовольствие ну очень так себе...