如何使用 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

您可以使用页脚上方的 CSS 三角形进行此操作。或者，所有这些都可以在 <footer> 标签中，并且带有填充 + 背景的内容将包含在另一个元素.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>

Answer 2

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

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>