How can I create a skewed footer with CSS?

Question

I am trying to create a skewed footer with HTML/CSS. Here is what I have:

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

header {
  background: red;
  height: 50px;
}

main {
  flex: 1;
  margin-bottom: 50px;
}

footer {
  background: blue;
  height: 150px;
  transform: skew(0deg, -10deg);
}

<header>
  <p>Header Content</p>
</header>

<main>
  <p>Main content here</p>
</main>

<footer>
  <div id="footer-content">
    <p>Footer Content</p>
  </div>
</footer>

There are two issues right now:

1. I don't want to have that white space in the bottom-right corner, it should be filled with blue as well.
2. I don't want the text itself inside the footer to be skewed. I tried to unskew just the text by doing transform: skew(0deg, 10deg);, but that made the text go outside the skewed footer.

Any help would be appreciated!

Answer 1

Consider linear-gradient within a pseudo-element that you put above the footer:

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

header {
  background: red;
  height: 50px;
}

main {
  flex: 1;
  margin-bottom: 50px;
}

footer {
  background: blue;
  height: 150px;
  position:relative;
}
footer:before {
 content:"";
 position:absolute;
 top:-60px;
 height:60px;
 left:0;
 right:0;
 background:linear-gradient(to bottom right, transparent 49%, blue 50%);
}

<header>
  <p>Header Content</p>
</header>

<main>
  <p>Main content here</p>
</main>

<footer>
  <div id="footer-content">
    <p>Footer Content</p>
  </div>
</footer>

Answer 2

You can make this using a CSS triangle above your footer. Alternatively, all of this could be in the <footer> tag, and your content with the padding + background would be wrapped in another element .footer-content.

* { margin: 0; padding: 0; }

footer {
  height: 80px;
  background-color: deepskyblue;
  padding: 40px;
}

.footer-border {
  box-sizing: padding-box;
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-top: 40px solid transparent;
  border-left: 50vw solid transparent;
  border-right: 50vw solid deepskyblue;
  border-bottom: 40px solid deepskyblue;
}

<div class="footer-border"></div>
<footer>Content</footer>