Как создать вогнутую изогнутую боковую панель? ⇐ CSS

[Anonymous]

Я пытаюсь вырезать вогнутый край на правой стороне элемента div (в конечном итоге, чтобы сделать изогнутую боковую панель). Я изо всех сил пытался добиться этого с помощью CSS.
Я подошел к этому довольно близко, обернув остальную часть содержимого в div с помощью border-radius-top-left. и border-radius-bottom-left, создающие иллюзию изогнутой боковой панели:

Код: Выделить всё

.contentMask {
margin-left: 12%;
border-top-left-radius: 12% 50%;
border-bottom-left-radius: 11% 47%;
}

Однако результат не повторяет кривую так, как мне хотелось, — он больше похож на эллипс с очень плоским краем. Я не могу понять это правильно. Есть ли способ создать подобную боковую панель по дуге, которую я могу определить?
Изменить для потомков: я немного приблизился к тому, что хотел, благодаря дополнительному хаку. Я сделал контент выше экрана с дополнительным вертикальным пространством, а затем использовал отрицательное верхнее поле, чтобы прокрутить его обратно на место. Затем я создал внешний контейнер с высотой всего объекта: 100vh и переполнением: скрытым, что позволило мне фактически отрезать часть кривой и получить желаемую дугу. Единственная проблема заключается в том, что я не могу таким образом добавить тень от окна.



Подробнее здесь: https://stackoverflow.com/questions/708 ... ng-sidebar