Warum funktioniert mein :: before-Pseudo-Element nicht?

Question

Ich habe Probleme mit dem ::before Pseudo-Element. In meinem Stift benutze ich die ::before und ::after Selektoren, um meinen Divs schräge Kanten zu geben. Auf dem ersten Div scheint das gut zu funktionieren. Aber auf der zweiten div, die Neigung ist nur dehnen 50% der Breite der div. Hier ist mein Code:

.services { 
 
    text-align: center; 
 
    background: linear-gradient(to right, #F1F2B5 , #135058); 
 
    height: 250px; 
 
    width: 100%; 
 
    position: relative; 
 
} 
 
.services::before { 
 
    content: ""; 
 
    background: linear-gradient(to right, #F1F2B5 , #135058); 
 
    width: 100%; 
 
    height: 200px; 
 
    transform: skewY(-5deg); 
 
    position: absolute; 
 
    top: -100px; 
 
    z-index: -1; 
 
} 
 
.flex { 
 
    display: flex; 
 
    width: 100%; 
 
    border: 1px solid red; 
 
} 
 
.box-alt { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: blue; 
 
    border: 3px solid grey; 
 
    transform: rotate(45deg); 
 
}

<div class="services"> 
 
    <h2>Services</h2> 
 
    <hr /> 
 
    <div class="flex"> 
 
    <div class="box-alt">hi</div> 
 
    <div class="box-alt">hi</div> 
 
    <div class="box-alt">hi</div> 
 
    </div> 
 
</div>

Auch hier ist der Link zu meiner Feder: http://codepen.io/Hudson_Taylor11/pen/XpBMwM?editors=0100

Answer 1

Sie left: 0 auf der ::before Stil Regel fehlt. Ich denke, es ist standardmäßig auf auto, was nicht der gleiche Wert ist.

Hier die Details: https://developer.mozilla.org/en-US/docs/Web/CSS/left#Values

Es tut Standard auto, die MDN wie folgt beschreibt:

ist ein Schlüsselwort, das bedeutet: für absolut positionierte Elemente, auf die Position des Elements basierend die richtige Eigenschaft und die behandelte Breite: auto als Breite basierend auf dem Inhalt.

Ich bin nicht ganz sicher, wie das berechnet wird und einige Browser scheinen das anders zu interpretieren. Ich denke, FF wird absolutely positionierte Elemente mit einer autoleft und right verlassen, wo sie normalerweise erscheinen würden, wenn sie static wären, aber ich würde einige Tests bauen müssen, um sicher zu sein. In jedem Fall ist es im Allgemeinen eine gute Idee, immer explizit links, rechts oder beides zu setzen, um die Mehrdeutigkeit zu reduzieren.