Html 如何绘制div的iregular形状并对其应用阴影？

我想画的大致如下，其中div的大小是动态的（取决于屏幕大小和其中的内容），而two circle的大小是静态的（px）

有没有更好的方法用阴影画这个

正文{
背景：白色；
}
.卡片{
背景：#fff；
边界半径：4px；
盒影：4px4px4px4px红色；
宽度：200px；
高度：200px；
利润率：20px；
位置：相对位置；
}
左边
.对{
背景：#ccc；
位置：绝对位置；
宽度：20px；
高度：20px；
边界半径：50%；
滤镜：投影（1px 0px 0px红色）；
左：-10px；
最高：50%；
}
.对{
左：197px；
过滤器：阴影（-5px 0px 1px红色）；
}

---

您可以使用径向渐变作为背景，如下所示：

.box{
利润率：50像素；
边界半径：10px；
宽度：200px；
高度：250px；
背景：
径向梯度（左侧圆圈10px，透明98%，#fff 100%）左侧，
径向梯度（右侧圆圈10px，透明98%，#fff 100%）右侧；
背景大小：51%100%；
背景重复：无重复；
滤镜：投阴影（0.4px红色）；
}

两个半圆是否必须位于两侧的中间？实际上，在我的例子中，它们的位置将取决于上半张牌和下半张牌的内容，这两张牌都是动态的。@GlacJAY它可以基于内容。编辑您的问题以详细说明这一点，我将编辑我的答案