Html Z索引不适用于具有剪辑路径的伪元素

我正在尝试使用伪元素创建剪辑路径的边框。我已经尝试过改变它们的位置，我的伪元素仍然在上面。我怎样才能改变这个？ 你可以在这里看到我的代码

#屏蔽{
z指数：1；
背景色：红色；
盒影：1px 1px 1px黑色；
背景图像：url（“https://upload.wikimedia.org/wikipedia/commons/9/91/Bras%C3%A3o_Porto_Feliz.png");
背景大小：50%；
背景重复：无重复；
背景位置：中心；
背景混合模式：倍增；
显示：内联块；
高度：120px；
宽度：200px；
-webkit剪辑路径：多边形（100%0、100%75%、50%100%、0%75%、0）；
剪辑路径：多边形（100%0，100%75%，50%100%，0%75%，0）；
}
#标志{
宽度：100px；
高度：100px；
}
#盾牌：之前{
排名：0；
左：0；
转换：比例（1.2）；
内容：“；
显示：块；
宽度：100%；
身高：100%；
背景色：黑色；
位置：绝对位置；
z指数：-1；
}

---

只要把它翻过来就行了。使用：：after中的背景图像和实际div的黑色

#屏蔽{
z指数：1；
背景色：黑色；
盒影：1px 1px 1px黑色；
位置：相对位置；
显示：内联块；
高度：120px；
宽度：200px；
-webkit剪辑路径：多边形（100%0、100%75%、50%100%、0%75%、0）；
剪辑路径：多边形（100%0，100%75%，50%100%，0%75%，0）；
}
#标志{
宽度：100px；
高度：100px；
}
#盾牌：之前{
排名：0；
左：0；
转换：比例（1.2）；
内容：“；
显示：块；
宽度：100%；
身高：100%；
背景图像：url（“https://upload.wikimedia.org/wikipedia/commons/9/91/Bras%C3%A3o_Porto_Feliz.png");
背景重复：无重复；
背景位置：中心；
背景混合模式：倍增；
位置：绝对位置；
z指数：1；
背景大小：50%；
}

---

好吧，我想它会有另一种方法来做到这一点。。。但我想我可以用它。现在我明白了，我觉得以前没有这个想法很愚蠢。感谢你！干杯，没有问题的人，任何事情都有一百万种方法可以做，而我通常也会选择一种不起作用的方法，所以我们都在那里。我卡住了一个由PHP api调用创建的多维数组=(