Как сделать подобный шейп средствами css?

Question

[PantyDev]

Всем привет, вопрос в следующем, как сделать такой вот шейп средствами CSS:

Вопрос именно в впадине которая сверху слева.
Дело в том, что если делать закругления псевдоклассами и/или другими внутренними блоками, то при просмотре в адаптиве происходит вот такое:

Т.е. есть просветы, пиксели срезаются.
Ну и к тому же, если честно, хотелось бы такой шейп вырисовать именно реальный. Т.е. чтобы там где белый уступ - это прозрачность, а не белый заполнитель. Может можно это как-то организовать с масками?
Но с маской она тоже будет искревлятся если этот блок начнет сужаться, а мне этого не нужно.

Answer 1

[Ankhena]

Псевдоэлементы и радиальные градиенты
https://codepen.io/AnnaSummer/pen/KKQgaaN

Comments

[PantyDev]

Есть! Радиальные градиенты - то что нужно.

Answer 2

[Eugene]

3 варианта:

1. Играться с градиентами. Но это порнография и во всех браузерах будет показываться по-разному.

2.

Т.е. чтобы там где белый уступ - это прозрачность, а не белый заполнитель

Прозрачность невозможна. В верстке все блочное.

3. Обычное svg. Именно для такого он и придуман.

4. Если уж очень хочется версткой, то сделать синий прямоугольник обертку со скруглением по всем углам. Внутрь положить еще одну обертку (асболютом).Внутрь нее еще два - Слева белый, справа тоже белый. А потом в правый белый положить еще один синий, только с закругленией в левом верхнем углу.
Но это уже порнография как по мне. Ну и конечно это будет не шейп.

Вот идеальный пример того, как это обычно реализуют. Тут сделано через png. Но лучше через svg

Comments

[PantyDev]

Ан нет, сзади у этого блока другой элемент - параллакс-картинка. Нужна именно прозрачность. Получается, только градиенты? Если использовать svg в качестве всей картинки, то при растяжении svg будет исказажться. А за маски ничего не предложите, мало ли, мб знаете? Ну, те что mask-image
Я знаю что прозрачность невозможна для таких шейпов в блочных элементах, но быть может есть более изящное решение?

[Eugene]

PantyDev,

Получается, только градиенты?

Градиентами ты можешь покрасить фигуру под нестандартными углами. Но я бы очень посмотрел как бы это делали с такими изгибами в разные стороны. + как ты сделаешь эти скругления и в противоположные стороны?!
Это типо рисовать контур фигуры ограниченным функционалом который придуман чтобы закрашивать блоки...

Я уже много ребят видел с такими вопросами, которым говорили что это реально через градиент сделать. - Пока что ни одного решения не уведил. Если я ошибаюсь, дайте знать

mask-image работают по принцифу как раз таки обложки, которая в 90% выступает в виде svg фигуры

clip-path
https://bennettfeely.com/clippy/

Ты можешь сделать любую фигуру svg и сделать так, чтобы она выступала максой для любого блока.

Я до сих пор не пойму, зачем ломать себе голову если можно за 5 минут сделать все через svg?
Ну а если нужна адаптивность, сделать как на примере яндекса с псевдоэлементами.
Ну типо.. CSS - это код. Который придется писать.
SVG - это тоже код, который достаточно просто вставить.
Зачем придумывать себе проблему?) макет же явно в фигме

https://jsfiddle.net/XXbJ5/
https://stackoverflow.com/questions/55084562/how-t... - ууууух как ты долго будешь "рисовать" свою фигуру

https://codepen.io/parkerbennett/pen/kyEoPo
https://codepen.io/parkerbennett/pen/kyEoPo