Css 在另一个div下显示一个div的剪辑路径

我希望在另一个具有剪辑路径的div下面显示一个div，但结果有点奇怪

如果注释剪辑路径CSS，块将正常显示

但是，我想做到这一点。在我的图像示例中，红方块位于绿方块的下方

---

提前感谢您的回复。

假设我理解您的需求，下面是一个工作示例。我不得不重新构造你的代码。我把剪辑应用到你的红色div上，就是有图像的那一个。然后，我使用百分比绘制了剪切遮罩，包括整个矩形，而不仅仅是三角形：

.left {
    position: relative;
    z-index: 2;
    background: green;
    height: 600px;
    -webkit-clip-path: polygon(0% 0%, 100% 0, 100% 285px, 110% 300px, 100% 315px, 100% 100%, 0 100%);
    clip-path: polygon(0% 0%, 100% 0, 100% 285px, 110% 300px, 100% 315px, 100% 100%, 0 100%);
    padding: 0;
}

---

假设我理解您的需求，下面是一个有效的示例。我不得不重新构造你的代码。我把剪辑应用到你的红色div上，就是有图像的那一个。然后，我使用百分比绘制了剪切遮罩，包括整个矩形，而不仅仅是三角形：

.left {
    position: relative;
    z-index: 2;
    background: green;
    height: 600px;
    -webkit-clip-path: polygon(0% 0%, 100% 0, 100% 285px, 110% 300px, 100% 315px, 100% 100%, 0 100%);
    clip-path: polygon(0% 0%, 100% 0, 100% 285px, 110% 300px, 100% 315px, 100% 100%, 0 100%);
    padding: 0;
}