html - 如何使用 CSS 创建倾斜的页脚？

Question

我正在尝试使用 HTML/CSS 创建倾斜的页脚。这是我所拥有的:

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>

目前有两个问题:

1. 我不想在右下角有那个空白区域，它也应该用蓝色填充。
2. 我不希望 footer 中的文本本身倾斜。我试图通过执行 transform: skew(0deg, 10deg); 来仅倾斜文本，但这会使文本超出倾斜的页脚。

如有任何帮助，我们将不胜感激!

Answer 1

考虑放置在页脚上方的伪元素中的线性渐变:

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>