Html 使div的顶部和底部都倾斜

我正试图扭曲一个div的顶部和底部，以创建一个形状，然后插入一个背景图案。然而，经过几个小时的研究，我真的无法找到一个固溶体。从某种意义上说，我几乎做到了，我所需要做的就是倾斜底部，但我正在寻求一些帮助或指导

我希望底部能反映顶部的倾斜。有什么建议吗

#测试{
位置：相对位置；
宽度：100%；
高度：400px；
}
.bg{
宽度：50%；
高度：800px；
-webkit转换：所有300毫秒的易用性；
背景：黑色；
边界半径：80px 0px 0px 80px；
位置：绝对位置；
右：0；
排名：0；
-ms变换：歪斜（-9度）；
-webkit变换：歪斜（-9度）；
变换：歪斜（-9度）；
}

---

通过一些旋转和透视，您可以做到：

.box{
左边距：自动；
宽度：200px；
高度：450px；
变换原点：右；
变换：透视（100px）旋转（-10度）；
边界半径：40px 0 40px；
溢出：隐藏；
}
.box：：之前{
内容：“；
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
背景：url(https://picsum.photos/id/1074/400/800)中心/盖；
转换原点：继承；
变换：透视（100像素）旋转（10度）；
}
身体{
保证金：0；
背景：#eee；
}