Unexpected issue arose.
I recently discovered pseudo elements and have been utilizing them to create a skewed header and footer design without affecting the text inside. The header looks good and functions correctly, meeting my expectations. This is what I wanted / envisioned:
https://i.sstatic.net/XbEvr.png
However, this is what actually occurred:
https://i.sstatic.net/C0Yko.png
Any suggestions on how to prevent the pseudo element from impacting the page's height? Alternatively, what is the best approach to achieve the desired outcome shown in the above image?
NOTE: Utilizing a script is an option as I have other JS requirements, but I would prefer not to use it for appearance-related tasks like this if possible. It seems that using a polygon could be a solution, although I find the skew effect more appealing as it allows me to maintain consistency with the angles of other elements on the webpage, which is the primary goal of this endeavor. Below is some relevant code to help you get started:
:root {
--dark-purple: hsla(274, 64%, 10%, 1);
--med-purple: hsla(274, 45%, 20%, 1);
... (long CSS code)
}
... (additional CSS classes)
<header>
<div class="angled-top">
[Header stuff here]
</div>
</header>
<main>
<div style="height: 70vh">... Simulate some large amount of content ...</div>
</main>
<footer>
<div class="angled-bottom">
<div class="footer--column">
<h3>Sitemap</h3>
</div>
<div class="footer--column">
<h3>Connect</h3>
</div>
<div class="footer--column">
<h3>Recommended Sites</h3>
</div>
</div>
</footer>