Как сделать наложить такой бэкграунд с дугой слева?

Question

[poylar123]

Думал сделать через псевдоэлемент и бордер радиус, но как я понял такой "угол" дуги слева не получится задать им.
Какие есть решения?
Градиентом тоже пробовал, но не вышло. Возможно плохо пытался.

Comments

[posters]

Зачем в данном случае мучиться с css? добавьте бэкграунд единой картинкой. Если в фотошопе это разные слои, объедините их и экспортируйте картинку.
У вас же не слайдер. В данном случае так можно.

[poylar123]

posters, это зеплин, так нет такого элемента, я не знаю как его вытащить

Answer 1

[Рома Зварич]

Вариант - использовать радиальный градиент

Пример:
https://codepen.io/hisbvdis/pen/gOYroRy

Comments

[poylar123]

Спасибо, но это немного не подходит, так как дуга не совсмем такая же как на картинке. Исправить это можно только повернув ее немного с помощью rotate?

[poylar123]

prntscr.com/ot2fax

[Рома Зварич]

poylar123, обновил код на CodePen. Нужно подобрать ширину и высоту эллипса для каждого слоя. Я на глаз это сделать не могу. Подберите исходя из макета.

[poylar123]

Рома Зварич, хорошо, спасибо, но не получилось подобрать так чтобы круг идеально вписывался в этот полукруг, поотму что картинка сама немного повернута, либо этот полукруг не идеально ровный.