CSS凹角写法

<style>
    .outer{
        position: absolute;
        left: 100px;
        top: 100px;
        width: 300px;
        height: 500px;
        background-color: #0a6ebd;
        display: flex;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        border: 1px solid #0a6ebd;
    }
    .inner-1{
        width: 250px;
        height: 450px;
        box-sizing: border-box;
        background-color: #0da6ec;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid red;
        border-top-left-radius: 25px;

    }
    .inner-2{
        width: 200px;
        height: 400px;
        box-sizing: border-box;
        background-color: #00bcd4;
        position: relative;
        border: 1px solid red;
        border-top-left-radius: 25px;

    }
    .left-corner{
        width: 25px;
        height: 25px;
        /* border-radius: 100%; */
        border-bottom-right-radius: 100%;
        background-color: inherit;
        position: absolute;
        left: -1px;
        top: -1px;
        z-index: 10;
        border-bottom: 1px solid red;
        border-right: 1px solid red;
        box-sizing: border-box;
    }
</style>

<div class="outer">

    <div class="inner-1">
        <div class="left-corner" style="background-color: #0a6ebd;"></div>
        <div class="inner-2">
            <div class="left-corner" style="background-color: #0da6ec;"></div>
        </div>
    </div>
</div>