Css 怎样画一张梯形的卡片？

这是最后的效果

我试过了，但我不知道怎么做

我希望得到一些提示来帮助我继续

我现在添加了一些代码，使它看起来更像它。但它看起来还是有点不完美

你能看到下面的结果吗

我花了很多时间来组合它们，但是圆角看起来不是很平滑

.block{
位置：相对位置；
}
.块形状{
位置：相对位置；
显示器：flex；
}
.块状{
位置：绝对位置；
高度：30px；
宽度：50%；
排名：0；
}
.块形左{
左：0；
边界半径：40px 40px 0/30px 30px 0；
背景色：#eee；
}
.块形\uuuu右{
右：0；
边缘顶部：30px；
边界半径：0 0 40px 40px/0 0 0 30px 30px；
背景色：#fff；
}
.块填充{
位置：绝对位置；
排名：0；
左：0；
底部：0；
右：0；
}
1.砌块填充{
位置：绝对位置；
排名：0；
框大小：边框框；
}
.块填充左{
左：0；
宽度：50%；
高度：90px；
背景色：#eee；
边界半径：40px 40px 0/30px 30px 0；
}
.block-fill\右{
右：0；
边缘顶部：30px；
宽度：50%；
高度：60px；
背景：线性梯度（向右，#eee，#fff）；
边界半径：0 40px 0 0/0 30px 0 0；
}
.区块内容{
位置：相对位置；
z指数：3；
高度：300px；
背景色：#eee；
边缘顶部：60像素；
边界半径：0 30px 30px 30px；
}

---

这里有一个想法，使用一个元素和一个带有小型SVG过滤器的伪元素来环绕边缘：

.box{
宽度：250px；
高度：150像素；
利润率：50像素20像素；
位置：相对位置；
背景：红色；
筛选器：url（“#goo”）
}
.box:之前，
.盒子：之后{
内容：“；
位置：绝对位置；
高度：30px；
宽度：25%；
背景：继承；
}
.下：之前{
最高：100%；
右：0；
}
.下：之后{
最高：100%；
左：50%；
边界半径：0 20px；
变换原点：顶部；
变换：倾斜（8度）；
}
.托普：以前{
底部：100%；
左：0；
}
.托普：之后{
底部：100%；
右：50%；
边界半径：0 20px 0 0；
变换原点：底部；
变换：倾斜（8度）；
}

你能给我看一张梯形卡片的样子吗？。我已经穿上了为什么你不使用经过细化的PNG？它们的成本小于20KB