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

Answer 2

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

＆＃13;

＆＃13;

* { 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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;