Форма затмения в нижней части div с использованием CSS

Question

Я хочу создать форму затмения в нижней части <div>, я попробовал приведенный ниже код, но он не дает точную кривую и изгиб углов, я хочу, чтобы углы были без изгибов, я прикрепил изображение с этим, я хочу как прикрепленное изображение

.curved-box-wrapper {
        background-color:blue;
        color: white;
        display: inline-block;
        width: 100%;
        max-width: 195px;
        padding: 10px;
        box-shadow: -4px 0px 8px 0px rgba(38,37,38,0.56);
        border: 2px solid #fff;
        border-bottom-left-radius: 120px 15%;
        border-bottom-right-radius: 120px 15%;
 }

<div class="curved-box-wrapper">

                            <p class="text-15 bold-600 no-margin-bottom">Clinic Patient Services</p>
                            <img src="{{asset('img/clinic-home-box.jpg')}}" alt="box"
                                 class="img-fluid box-img">
                            <p class="text-13 no-margin-bottom">
                                Provides help with selecting
                                or changing a provider and
                                questions about our clinic
                                programs or services.
                            </p>
                            <ul class="ul-no-space">
                                <li class="text-15 bold-600">Call:  (209) 468-6656</li>
                            </ul>
                        </div>