Question

嗨，

对我来说似乎是个bug。使用clip-path更改了伪元素的堆栈顺序，并防止您将它们放置在元素的背面。这是我的小提琴：

#topcmm-123flashchat-side-userlist-inner {background-color:blue;position:absolute;}
#topcmm-123flashchat-side-userlist-inner, #topcmm-123flashchat-side-userlist-inner::before, #topcmm-123flashchat-side-userlist-inner::after {
 clip-path:polygon(8.03% 2%, 21.81% 2%, 26.77% 4.41%, 56.94% 4.41%, 60.63% 2%, 93.14% 2%, 98.85% 6.08%, 99.07% 87.01%, 94.28% 90.46%, 93.21% 97.43%, 55.48% 97.43%, 51.93% 99.00%, 26.95% 99%, 23.22% 97.31%, 6.93% 97.34%, 6.93% 89.43%, 3% 86.19%, 3% 6.36%);
}
#topcmm-123flashchat-side-userlist-inner::before, #topcmm-123flashchat-side-userlist-inner::after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
 top:0;
 left:0;
    transform-origin:right;
}
#topcmm-123flashchat-side-userlist-inner::before {
    background-color: #808080;
    transform: scale(1.02);z-index:-1;
}
#topcmm-123flashchat-side-userlist-inner::after {background-color:black;transform:scale(1.03);z-index:-2;}

https://jsfiddle.net/kvd2ucwm/5/

蓝色应该位于顶部，然后灰色和黑色位于背面，但是如果存在剪切路径，则蓝色将变为背景。这个问题有解决方案吗？

谢谢。

伪元素位置不适用于剪切路径

0 个答案: