Skewed Hintergrund div auf der unteren rechten Block des Content positioniert Ecke

Question

Siehe das folgende Beispiel

.nav-bar { 
 
    position: relative; 
 
    background-color: red; 
 
} 
 
.nav-bar:before { 
 
    content: ''; 
 
    position: absolute; 
 
    left: 0; 
 
    bottom: 0; 
 
    overflow: visible; 
 
    width: 100%; 
 
    height: 10.938rem; 
 
    background: #1a5733; 
 
    z-index: -1; 
 
    -webkit-transform: skewY(-1.6deg); 
 
    -moz-transform: skewY(-1.6deg); 
 
    -ms-transform: skewY(-1.6deg); 
 
    -o-transform: skewY(-1.6deg); 
 
    transform: skewY(-1.6deg); 
 
    -webkit-backface-visibility: hidden; 
 
    backface-visibility: initial; 
 
    display: block; 
 
} 
 
.nav-menu { 
 
    position: relative; 
 
}

<div class="nav-bar"> 
 
    <nav class="nav-menu"> 
 
    <a href="#" class="nav-link">Home</a> 
 
    <a href="#" class="nav-link">Sobre</a> 
 
    <a href="#" class="nav-link">Destaques</a> 
 
    <br> 
 
    <a href="#" class="nav-link">Contactos</a> 
 
    <br> 
 
    </nav> 
 
</div>

Ich versuche, das Grün zu erhalten schief eingezogen nav-bar: vor zur Position unten auf der rechten Seite der Nav-Container so Überlauf entspricht dem Inhalt in den Container: (bitte beachten Sie, dass für die Zwecke e des Screenshots, modifizierte ich unten den ursprünglichen Wert 0 erzeugt zufällige Ergebnisse auf dem Bildschirm Resize)

Ist es möglich zu berechnen, die untere Differenz auf dem 1.6deg Skew angewandt auf das nav-bar:before Element basierend auf -25px? Bitte beachten Sie die Reaktionsfähigkeit.

Oder ist es nur ein Fall der manuellen Anpassung mit Media Query Breakpoints?

Answer 1

Sie können dem Element transform-origin: right bottom hinzufügen, um dies zu erreichen. Das Festlegen des Transformationsursprungs als right bottom bedeutet, dass die Transformation angewendet wird, indem dieser Punkt als fixiert beibehalten wird.

.nav-bar { 
 
    position: relative; 
 
    background-color: red; 
 
} 
 
.nav-bar:before { 
 
    content: ''; 
 
    position: absolute; 
 
    left: 0; 
 
    bottom: 0; 
 
    overflow: visible; 
 
    width: 100%; 
 
    height: 10.938rem; 
 
    background: #1a5733; 
 
    z-index: -1; 
 
    -webkit-transform: skewY(-1.6deg); 
 
    -moz-transform: skewY(-1.6deg); 
 
    -ms-transform: skewY(-1.6deg); 
 
    -o-transform: skewY(-1.6deg); 
 
    transform: skewY(-1.6deg); 
 
    -webkit-backface-visibility: hidden; 
 
    backface-visibility: hidden; 
 
    transform-origin: right bottom; 
 
    display: block; 
 
} 
 
.nav-menu { 
 
    position: relative; 
 
}

<div class="nav-bar"> 
 
    <nav class="nav-menu"> 
 
    <a href="#" class="nav-link">Home</a> 
 
    <a href="#" class="nav-link">Sobre</a> 
 
    <a href="#" class="nav-link">Destaques</a> 
 
    <br> 
 
    <a href="#" class="nav-link">Contactos</a> 
 
    <br> 
 
    </nav> 
 
</div>