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

Question

[Сергей Мурин]

как сверстать такой блок, со стандартными углами проблем нет а вот нижнее правое место вызывает сложность

Comments

[Ankhena]

Обычные радиальные градиенты.
А учитывая, что фон однотонный, то вообще без проблем.

[Сергей Мурин]

Ankhena, проблема в нижних углах с правой стороны((

[Ankhena]

Сергей Мурин,
извините, придется с VPN, потому что я их делала когда jsfiddle ещё работал
https://jsfiddle.net/Ankhena/jt8frbs3/
https://jsfiddle.net/Ankhena/kLr7onyb/
https://jsfiddle.net/Ankhena/1hu9ot0q/1/
https://jsfiddle.net/Ankhena/wkdfngyu/
https://jsfiddle.net/Ankhena/wj102v8e/2/
https://jsfiddle.net/Ankhena/0ocsqd8f/

и т.д.

[Сергей Мурин]

Ankhena, ух, прикольно спасибо большое))

Answer 1

[Сергей Мурин]

Решил задачу таким способом

<div class="box__body">
        <div class="box__item">
            <div class="box">
            </div>
                <div class="box2"></div>
        </div>
    </div>

.box__body{
    position: relative;
    z-index: -1;
    display: flex;
    max-width: 800px;
}

.box__item{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}
.box{
    width: 100%;
    height: 227px;
    display: flex;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    border-bottom-right-radius: 16px;
    background: #4F8CF6;
}
.box2{
    max-width: 503px;
    height: 113px;
    background: #4F8CF6;
    position: relative;
}
.box2::after{
    content: '';
    position: absolute;
    top: 0px;
    right: 0px;
    width: 32px;
    height: 113px;
    background: #fbfbfb;
    border-top-left-radius: 16px;
}

.box2::before{
    position: absolute;
    content: '';
    height: 34px;
    width: 93.6%;
    border-bottom-right-radius: 16px;
    background: #4F8CF6;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
    bottom: -34px;
    z-index: -1;
}

Answer 2

[SymphoGraph]

Comments

[Сергей Мурин]

Можно так да))) Спасибо))

Answer 3

[Дмитрий]

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

Comments

[Сергей Мурин]

Это решение проблемы 1))) дело в том что углы которые находятся внизу и с право не скругляются.

Answer 4

[alexalexes]

В качестве фона сделать svg с необходимыми примитивами. А поверх уже на прозрачном фоне выполнить html блоки.