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

Question

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

.h1bcg {
  margin-top: 180px;
  position: relative;
  text-align: center;
  padding: 12px;
  margin-bottom: 6px;
  height: 200px;
  width: 666px;
}
.h1bcg:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 51%;
  background: rgba(88, 255, 171, 0.7);
  -webkit-transform: skew(0deg, 6deg);
  -moz-transform: skew(0deg, 6deg);
  -ms-transform: skew(0deg, 6deg);
  -o-transform: skew(0deg, 6deg);
  transform: skew(0deg, 6deg);
  box-shadow:  0.1rem 0.6rem 9px  rgba(0, 0, 0, 0.4);
}
.h1bcg:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 50%;
  background: rgba(88, 255, 171, 0.7);
  -webkit-transform: skew(0deg, -6deg);
  -moz-transform: skew(0deg, -6deg);
  -ms-transform: skew(0deg, -6deg);
  -o-transform: skew(0deg, -6deg);
  transform: skew(0deg, -6deg);
  box-shadow:  0.1rem 0.6rem 9px  rgba(0, 0, 0, 0.4);
}

      <div class="h1bcg:before h1bcg:after ">
         <h1 class="text-center h1bcg"> Lorem              ipsum dolor sit amet. </h1>
      </div>

Answer 1

伪类和 z 索引是正确的。

通过为元素提供负 z 索引，将伪类放置在元素下方。

另请注意：伪类(:before和:after样式规则(将适当地应用于包含原始类(.h1bcg(的元素。 您不必在 HTML 中指定这些类即可使它们生效。

.h1bcg {
  margin-top: 180px;
  position: relative;
  text-align: center;
  padding: 12px;
  margin-bottom: 6px;
  height: 200px;
  width: 666px;
}
.h1bcg:before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  height: 100%;
  width: 51%;
  background: rgba(88, 255, 171, 0.7);
  -webkit-transform: skew(0deg, 6deg);
  -moz-transform: skew(0deg, 6deg);
  -ms-transform: skew(0deg, 6deg);
  -o-transform: skew(0deg, 6deg);
  transform: skew(0deg, 6deg);
  box-shadow:  0.1rem 0.6rem 9px  rgba(0, 0, 0, 0.4);
}
.h1bcg:after {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  height: 100%;
  width: 50%;
  background: rgba(88, 255, 171, 0.7);
  -webkit-transform: skew(0deg, -6deg);
  -moz-transform: skew(0deg, -6deg);
  -ms-transform: skew(0deg, -6deg);
  -o-transform: skew(0deg, -6deg);
  transform: skew(0deg, -6deg);
  box-shadow:  0.1rem 0.6rem 9px  rgba(0, 0, 0, 0.4);
}

<div>
  <h1 class="text-center h1bcg"> Lorem              ipsum dolor sit amet. </h1>
</div>

Answer 2

我认为您正在寻找以下结果。

为此，我在两个伪类(.h1bcg:after和.h1bcg:before(中添加了一个 neganitve z-index (。

希望对您有所帮助。

.h1bcg {
  margin-top: 180px;
  position: relative;
  text-align: center;
  padding: 12px;
  margin-bottom: 6px;
  height: 200px;
  width: 666px;
}
.h1bcg:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 51%;
  background: rgba(88, 255, 171, 0.7);
  -webkit-transform: skew(0deg, 6deg);
  -moz-transform: skew(0deg, 6deg);
  -ms-transform: skew(0deg, 6deg);
  -o-transform: skew(0deg, 6deg);
  transform: skew(0deg, 6deg);
  box-shadow:  0.1rem 0.6rem 9px  rgba(0, 0, 0, 0.4);
  z-index:-1;
}
.h1bcg:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 50%;
  background: rgba(88, 255, 171, 0.7);
  -webkit-transform: skew(0deg, -6deg);
  -moz-transform: skew(0deg, -6deg);
  -ms-transform: skew(0deg, -6deg);
  -o-transform: skew(0deg, -6deg);
  transform: skew(0deg, -6deg);
  box-shadow:  0.1rem 0.6rem 9px  rgba(0, 0, 0, 0.4);
  z-index:-1;
}

<div class="h1bcg:before h1bcg:after ">
  <h1 class="text-center h1bcg"> Lorem ipsum dolor sit amet.</h1>
</div>