css实现连贯圆角盒子

结构大概是这样的，大盒子左下角添加一个不透明多行描述，且盒子为圆角，上下盒子宽度不一致，盒子之间需要有圆弧衔接：

DOM结构

<div class="box">
    <div class="watermark">
        <div>盒子1</div>
        <div>盒子2</div>
    </div>
</div>

样式编写

使用css径向渐变实现衔接圆弧

.box {
    display: flex;
    align-items: end;
    width: 200px;
    height: 200px;
    background-color: green;
    color: white;
    text-align: center;
}

.box .watermark div {
    background-color: yellowgreen;
}
.box .watermark div:nth-child(1){
    position: relative;
    width: 70px;
    border-radius: 0 10px 0 0;
}
.box .watermark div:nth-child(1)::after{
    position: absolute;
    right: -10px;
    bottom: 0;
    width: 10px;
    height: 10px;
    content: "";
    background: radial-gradient(circle at 10px 0,transparent 10px,yellowgreen 10px);

}
.box .watermark div:nth-child(2) {
    width: 100px;
    border-radius: 0 10px 0 0;
}