（CSS）如何制作没有剪切路径的形状？

Question

朋友们， 我试图弄清楚如何使用纯CSS创建以下形状。

图像周围的红色边框表示用户的浏览器窗口。

我试图避免使用剪切路径，因为我无法弄清楚如何在黑白部分的顶部（仅一个或另一个）上应用图像和颜色渐变。最好是，我想让黑色部分充当空白白色背景的封面。

谢谢朋友！