css 矩形中间凹陷,边缘圆弧顺滑过渡,这种布局应该怎么实现,求助各位大神?

图片说明

这种布局该怎么写,实在是不会了,想了好久,一直没有很好地方案,求大神提点一二,提前谢过了

按照你的思路完全可以,而且位置的计算也不麻烦,完全可以实现。设置三个div,样式如下图片说明

div{
    width: 100px;
    height: 100px;
    background-color: #000;
    float: left;
}
.one{
    border-radius: 0 40px 0 0;
}
.two{
    margin-top: 30px;
    height: 70px;
    margin-left: -2px;
}
.two::after{
    content: '';
    position: absolute;
    margin-top: -60px;
    width: 100px;
    height: 100px;
    border-radius: 100px;
    background-color: #fff;
}
.three{
    margin-left: -2px;
    border-radius: 40px 0 0 0;
}

https://blog.csdn.net/jockerscolor/article/details/70154447

上面这个大佬的wxml是什么?