clip-path用于显示另一个div下面的div

Question

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

DEMO CODEPEN

clip-path: polygon(0 285px, 30px 300px, 0 315px);

如果您对剪辑路径CSS发表评论，则会正常显示该块。

但是，我想实现这一目标。在我的图片示例中，红色方块低于绿色方块。

提前感谢您的回复。

Answer 1

假设我理解你想要的东西，这是一个有效的例子。我不得不重新调整你的代码。我将剪辑应用到你的红色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;
}

https://codepen.io/anon/pen/QdNymZ