不能在背景上放置伪元素

Question

这是我的代码：

#topcmm-123flashchat-side-userlist-inner {background-color:blue;z-index:1;position:relative;}
#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;
    transform-origin:right;
}
#topcmm-123flashchat-side-userlist-inner::before {
    background-color: #80808033;
    transform: scale(1.02);z-index:-1;
}
#topcmm-123flashchat-side-userlist-inner::after {background-color:black;transform:scale(1.03);z-index:-2;}

html

<div id="topcmm-123flashchat-side-userlist-inner">
shit
</div>

https://jsfiddle.net/kvd2ucwm/

这些伪元素应该显示在背景上，但是尽管我将其z-index设置为负值，它们仍会继续显示在前景上。怎么了？请帮助我解决这个问题，这使我发疯。

谢谢。