Html 我想让CSS形状下面的文本位于顶部

我已经试过z-index了。我认为这和伪类有关，但我不知道它到底是什么。。。我是一个新手，所以我现在只能做HTML和CSS，我不知道任何JS。谢谢！：）

.h1bcg{
边缘顶部：180像素；
位置：相对位置；
文本对齐：居中；
填充：12px；
边缘底部：6px；
高度：200px；
宽度：666px；
}
.h1bcg：之前{
内容：''；
位置：绝对位置；
排名：0；
左：0；
身高：100%；
宽度：51%；
背景：rgba（88,255,171,0.7）；
-webkit变换：倾斜（0度，6度）；
-moz变换：倾斜（0度，6度）；
-ms变换：倾斜（0度，6度）；
-o变换：倾斜（0度，6度）；
变换：倾斜（0度，6度）；
盒子阴影：0.1rem 0.6rem 9px rgba（0,0,0,0.4）；
}
.h1bcg：之后{
内容：''；
位置：绝对位置；
排名：0；
右：0；
身高：100%；
宽度：50%；
背景：rgba（88,255,171,0.7）；
-webkit变换：倾斜（0度，-6度）；
-moz变换：倾斜（0度，-6度）；
-ms变换：倾斜（0度，-6度）；
-o变换：倾斜（0度，-6度）；
变换：倾斜（0度，-6度）；
盒子阴影：0.1rem 0.6rem 9px rgba（0,0,0,0.4）；
}

Lorem ipsum dolor sit amet。

我想你正在寻找以下结果

为此，我在两个psuedo类（

.h1bcg:after

和

.h1bcg:before

）中添加了一个neganitve

z-index

）

希望能有帮助

.h1bcg{
边缘顶部：180像素；
位置：相对位置；
文本对齐：居中；
填充：12px；
边缘底部：6px；
高度：200px；
宽度：666px；
}
.h1bcg：之前{
内容：''；
位置：绝对位置；
排名：0；
左：0；
身高：100%；
宽度：51%；
背景：rgba（88,255,171,0.7）；
-webkit变换：倾斜（0度，6度）；
-moz变换：倾斜（0度，6度）；
-ms变换：倾斜（0度，6度）；
-o变换：倾斜（0度，6度）；
变换：倾斜（0度，6度）；
盒子阴影：0.1rem 0.6rem 9px rgba（0,0,0,0.4）；
z指数：-1；
}
.h1bcg：之后{
内容：''；
位置：绝对位置；
排名：0；
右：0；
身高：100%；
宽度：50%；
背景：rgba（88,255,171,0.7）；
-webkit变换：倾斜（0度，-6度）；
-moz变换：倾斜（0度，-6度）；
-ms变换：倾斜（0度，-6度）；
-o变换：倾斜（0度，-6度）；
变换：倾斜（0度，-6度）；
盒子阴影：0.1rem 0.6rem 9px rgba（0,0,0,0.4）；
z指数：-1；
}

Lorem ipsum dolor sit amet。

伪类和z索引是正确的

通过给元素一个负z索引，将伪类定位在元素下面

另请注意：伪类（

:before

和

:before

样式规则）被适当地应用于包含原始类（

.h1bcg

）的元素。您不必在HTML中指定这些类，它们就可以生效

.h1bcg{
边缘顶部：180像素；
位置：相对位置；
文本对齐：居中；
填充：12px；
边缘底部：6px；
高度：200px；
宽度：666px；
}
.h1bcg：之前{
内容：''；
位置：绝对位置；
z指数：-1；
排名：0；
左：0；
身高：100%；
宽度：51%；
背景：rgba（88,255,171,0.7）；
-webkit变换：倾斜（0度，6度）；
-moz变换：倾斜（0度，6度）；
-ms变换：倾斜（0度，6度）；
-o变换：倾斜（0度，6度）；
变换：倾斜（0度，6度）；
盒子阴影：0.1rem 0.6rem 9px rgba（0,0,0,0.4）；
}
.h1bcg：之后{
内容：''；
位置：绝对位置；
z指数：-1；
排名：0；
右：0；
身高：100%；
宽度：50%；
背景：rgba（88,255,171,0.7）；
-webkit变换：倾斜（0度，-6度）；
-moz变换：倾斜（0度，-6度）；
-ms变换：倾斜（0度，-6度）；
-o变换：倾斜（0度，-6度）；
变换：倾斜（0度，-6度）；
盒子阴影：0.1rem 0.6rem 9px rgba（0,0,0,0.4）；
}

Lorem ipsum dolor sit amet。

哦，哇。。。我现在觉得很傻。我曾经尝试过负z-指数值，但没有成功，但现在它做得很好。我肯定做错了什么，非常感谢！我不知道！非常感谢。我开始使用伪类，所以我有点困惑。