CSSシェイプの下のテキストを上にしたい

Question

私はすでにZ-インデックスを試しました。私はそれが疑似クラスと関係があると思うが、それは何か、正確にはわからない...私は初心者だから、今は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-インデックスを付けます。

注意：元のクラス（.h1bcg）を含む要素には、擬似クラス（:beforeおよび:afterスタイリングルール）が適切に適用されます。これらのクラスを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

私はuは以下の結果を探していると思います。

私は、両方の擬似クラス（.h1bcg:afterと.h1bcg:before）にネガティブ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>