Html 如何将曲线div连接到另一个div？

*{
保证金：0；
填充：0；
}
身体{
宽度：100%；
身高：100%；
背景色：#DDDDDD；
}
h1{
颜色：#00BBFF；
字体系列：“Lato”，“Helvetica”，“Futura”，无衬线；
文本对齐：居中；
字体大小：30px；
边缘顶部：10px；
边缘底部：10px；
}
#容器{
宽度：550px；
高度：550px；
排名：0；
底部：0；
左：0；
右：0；
保证金：自动；
}
#结块容器{
宽度：400px；
高度：400px；
边界半径：100%/50%；
背景色：白色；
底部：0；
左：0；
右：0；
保证金：自动；
}
#顶{
背景色：白色；
边框底部：1px黑色实心；
宽度：400px；
高度：70像素；
边界半径：100%；
填充顶部：100px；
}
#底部{
背景色：白色；
边框底部：1px黑色实心；
宽度：400px；
高度：120px；
填充顶部：50px；
边框左下半径：100%；
边框右下半径：100%；
右边框：1px纯黑；
左边框：1px纯黑；
}
#中间的{
背景色：白色；
边框左下半径：100%；
边框右下半径：100%；
边框底部：20px#FFFFCC实心；
宽度：400px；
高度：100px；
填充底部：50px；
右边框：1px纯黑；
左边框：1px纯黑；
}

生日快乐！
妈妈，生日快乐！

您可以尝试以下解决方案：

*{
保证金：0；
填充：0；
}
身体{
宽度：100%；
身高：100%；
背景色：#DDDDDD；
}
h1{
颜色：#00BBFF；
字体系列：“Lato”，“Helvetica”，“Futura”，无衬线；
文本对齐：居中；
字体大小：30px；
边缘顶部：10px；
边缘底部：10px；
}
#容器{
宽度：550px；
高度：550px；
排名：0；
底部：0；
左：0；
右：0；
保证金：自动；
}
#结块容器{
宽度：400px；
高度：400px；
边界半径：100%/50%；
背景色：白色；
底部：0；
左：0；
右：0；
保证金：自动；
边框：1px纯黑；
}
#顶{
背景色：白色；
边框：1px黑色实心；
宽度：400px；
高度：70像素；
边界半径：100%；
填充顶部：100px；
左边距：-1px；
}
#底部{
背景色：白色；
边框底部：1px黑色实心；
宽度：400px；
高度：120px；
填充顶部：50px；
边框左下半径：100%；
边框右下半径：100%；
右边框：1px纯黑；
左边框：1px纯黑；
左边距：-1px；
}
#中间的{
背景色：白色；
宽度：400px；
高度：100px；
边框左下半径：100%；
边框右下半径：100%；
边框底部：20px#FFFFCC实心；
}

妈妈生日快乐！

检查它

*{
保证金：0；
填充：0；
}
身体{
宽度：100%；
身高：100%；
背景色：#DDDDDD；
}
h1{
颜色：#00BBFF；
字体系列：“Lato”，“Helvetica”，“Futura”，无衬线；
文本对齐：居中；
字体大小：30px；
边缘顶部：10px；
边缘底部：10px；
}
#容器{
宽度：550px；
高度：550px；
排名：0；
底部：0；
左：0；
右：0；
保证金：自动；
}
#结块容器{
宽度：400px；
高度：400px；
边界半径：100%/50%；
背景色：白色；
底部：0；
左：0；
右：0；
保证金：自动；
}
#顶{
背景色：白色；
边框底部：1px黑色实心；
宽度：400px；
高度：70像素；
边界半径：100%；
填充顶部：100px；
}
#底部{
背景色：白色；
边框底部：1px黑色实心；
宽度：400px；
高度：120px；
填充顶部：50px；
边框左下半径：100%；
边框右下半径：100%；
右边框：1px纯黑；
左边框：1px纯黑；
顶部：-79px；
位置：相对位置；
z指数：0；
}
#中间的{
背景色：白色；
边框左下半径：100%；
边框右下半径：100%；
边框底部：20px#FFFFCC实心；
宽度：400px；
高度：100px；
填充底部：50px；
右边框：1px纯黑；
左边框：1px纯黑；
位置：相对位置；
z指数：1；
}

生日快乐！
妈妈，生日快乐！

只需拆下中间的底部衬垫即可？