CSS 翻译和 z 索引

Question

我这里有个问题 在html文件的正文中有这样的内容：

<div>translate() issue</div>

我想通过CSS来实现这个形状： 这就是我的制作方法：

div {
        width: 300px;
        height: 200px;
        background-color: #eeeeee;

        display: flex;
        justify-content: center;
        align-items: center;
        color: #03a9f4;

        margin: 40px auto;
        position: relative;
}

div::before {
        content: "";
        background-color: #03a9f4;
        height: 100%;
        width: 100%;
        position: absolute;
        transform: rotate(-5deg);
        z-index: -1;
}

div::after {
        content: "";
        background-color: #e91e63;
        height: 100%;
        width: 100%;
        position: absolute;
        transform: rotate(5deg);
        z-index: -2;
}

它实际上起作用了，然后我想使用position和translate()将div居中，如下所示：

div {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
}

不是自动调整左右边距， 但， 由于变换属性，div::before 和 div::after 的“z-index”不再起作用。 有没有正确使用它们的解决方案或想法？

Answer 1

transform

属性使

<div>

成为新的堆叠上下文。这意味着其中的伪元素包含在其内部，这意味着

<div>

不能位于伪元素前面，因此

<div>

元素的背景颜色无法绘制到伪元素上。相反，您可以考虑在

<div>

内添加另一个元素，该 可以 在伪元素之上绘制：

div {
        width: 300px;
        height: 200px;
        background-color: #eeeeee;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 40px auto;
        position: relative;
}

p {
        background-color: #eeeeee;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #03a9f4;
}


div::before {
        content: "";
        background-color: #03a9f4;
        height: 100%;
        width: 100%;
        position: absolute;
        transform: rotate(-5deg);
        z-index: -1;
}

div::after {
        content: "";
        background-color: #e91e63;
        height: 100%;
        width: 100%;
        position: absolute;
        transform: rotate(5deg);
        z-index: -2;
}

div {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
}

<div><p>translate() issue</p></div>