Html 如何使用side div颜色填充圆角边缘空间？

我想使用CSS做一些类似下图的事情

---

将三个div相互嵌套，宽度递减，但高度相同。 使用

边界半径

可以得到圆角。 最后，为它们指定不同的颜色

html{
背景：#f1faff；
}
div{
高度：100px；
边界半径：20px；
}
.1分部{
宽度：300px；
背景：#e0ecfa；
}
.第2分部{
宽度：250px；
背景：#fff；
}
.第3分部{
宽度：50px；
背景：#4ed4b8；
}

欢迎使用堆栈溢出！希望您至少尝试自己编写此代码。我建议你做一些，或者通过谷歌，或者通过搜索，尝试一下。如果您仍然有问题，请带着您的代码回来并解释您尝试过的内容。您能否给出一些解释，而不仅仅是代码，以便人们理解建议内容。@AHaworth完成了。谢谢您的回复@SvenEberth。很抱歉，我没有提供足够的信息，所以你建议的方式我也提供了，但是我很难想出一种看起来不错的方式来为每个div添加内容，就像我添加的这个新图像。请接受我的回答，并尝试自己添加html和css。如果你失败了，你可以发布你的尝试，我们可以帮助你。但编码服务也不是这样。我的回答已经远远超出了需要。