Html 如何创建凹块？

如何在背景上创建带有图像的凹面块（例如滑块）？我需要的是：

---

我添加了

：伪
元素以添加带有
边界半径的圆形效果


.main{
显示：内联块；
文本对齐：居中；
位置：相对位置；
}
.主img{
位置：相对位置；
}
.主分区{
位置：绝对位置；
底部：0；
宽度：100%；
身高：30%；
z指数：0；
}
.主分区：后分区{
内容：''；
宽度：150%；
左-25%；
背景：白色；
身高：150%；
前-15%；
位置：绝对位置；
z指数：-1；
边界半径：50%；
}

第一同侧前庭
欢迎来到SO。请访问，了解如何提问