用于在另一个 div 下方显示一个 div 的剪辑路径

Question

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

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

用于在另一个 div 下方显示一个 div 的剪辑路径

clip-path for display an div below another div

css

clip-path