Как сделать блок такой же формы?

Question

[sekiiryoku]

Подскажите, как задать такую же форму div:

Comments

[sekiiryoku]

MrColdCoffee, отредактировал вопрос

[Aetae]

SVG

[Ankhena]

Приставьте псевдо с SVG, в чем сложность-то?

[Ivan Ustûžanin]

вариант 0: svg
вариант 1: дополнительный div и два псевдоэлемента с радиальными градиентами
вариант 2: игры с разными градиентами
вариант 3: https://codepen.io/Ivan-U7n/pen/VwoGvGr

Answer 1

[ksnk]

Немного переработал код от Ivan Ustûžanin, если все необязательное выкинуть, получится что-то такое

Comments

[Aetae]

Ну js тут совсем лишний: просто сделай "пипку" чуть утопленным центрированым псевдо-элементом фиксированной ширины и не придётся пересчитывать path.

[ksnk]

Ну, так то да. Для этой картинки - лишний функционал.
Это "по мотивам" кода из комментария. Зато, теоретически, можно любой path для обрезки воткнуть и пересчитывать размеры.

[Ankhena]

просто сделай "пипку" чуть утопленным центрированым псевдо-элементом фиксированной ширины и не придётся пересчитывать path.

Да даже и не фиксированной ширины. Фиксацию пропорций убрать из SVG и пусть подстраивается под размер псевдика, если вдруг нужен адаптивный размер.

Для такой формы и clip-path избыточен. Не говоря уж про JS.

[ksnk]

Aetae, Ankhena нарисовал косой градиент в бякгграунде. Для такого случая - JS оправдан ?

[Ankhena]

ksnk, да и не обязательно :)
Это я на коленке, не заморачиваясь ни на выравнивание градиентов ни на эллипсы для получения нужной фигуры. Чисто показать возможности, раз уж такой разговор.
Если заменить уголки на svg будет аккуратнее.