Take a look at this example
.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">About</a>
<a href="#" class="nav-link">Highlights</a>
<br>
<a href="#" class="nav-link">Contacts</a>
<br>
</nav>
</div>I am attempting to align the green skewed nav-bar:before element with the right-hand side of the nav-container so that its overflow matches the content in the container: https://i.sstatic.net/DLZOp.jpg (Please note that I adjusted the bottom to -25px for the screenshot, as the original value of 0 produces inconsistent results upon screen resize)
Is it feasible to calculate the necessary bottom difference based on the 1.6-degree skew applied to the nav-bar:before element? How can we ensure responsiveness?
Or do we simply need to manually adjust using media query breakpoints?