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

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;
}`