Ich möchte den Text unter der CSS-Form oben

Question

Ich habe bereits versucht, Z-Index. Ich denke, es hat etwas mit den Pseudo-Klassen zu tun, aber ich weiß nicht, was es ist, genau ... Ich bin ein Neuling, also kann ich nur HTML und CSS für jetzt tun, ich kenne kein JS. Vielen Dank! :)

.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

Pseudo-Klassen und z-index ist richtig.

Positionieren Sie die Pseudo-Klassen unter dem Element, indem Sie ihm einen negativen Z-Index geben.

Beachten Sie auch: Pseudo-Klassen (die :before und :after Styling-Regeln) werden auf das Element angewendet, um die ursprüngliche Klasse (.h1bcg) in geeigneter Weise enthalten. Sie müssen diese Klassen nicht in Ihrem HTML angeben, damit sie wirksam werden.

.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

denke ich, u für die unten Ergebnis suchen.

Dafür habe ich einen Neganitve z-index zu beiden pseudo-Klassen hinzugefügt (.h1bcg:after und .h1bcg:before).

Ich hoffe, es hilft.

.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>