如何使用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); 来取消文字的倾斜，但这使得文字超出了倾斜的页脚。

非常感谢您的帮助！

- inhwrbp

---

你是不是在寻找这样的东西 - https://codepen.io/nagasai/pen/pLzPOg - Naga Sai A

沿着 X 轴改变倾斜度数 - Naga Sai A

@NagaSaiA 不是很清楚，我基本上想要已经拥有的，但底部也需要填充。基本上是试图创建一个“坡度”。 - inhwrbp

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>

- Temani Afif

---

这是一种非常有趣的方法，我给了你一个赞。唯一的问题是，如果我调整斜坡的角度，渐变的过渡就会开始显示出来。 - inhwrbp

@inhwrbp 不要改变角度 :) 这个想法是只改变伪元素的高度来控制角度... 高度:0 --> 角度:0 -- 增加高度以获得更多角度 ;) - Temani Afif

@inhwrbp 你可以在同一百分比上停止，例如 transparent 50%，blue 50%，以创建锐利的边缘。 - Olex Ponomarenko

@OlexPonomarenko 在这种情况下看起来不太好，对于某些高度值我们会有一种楼梯状的效果。 - Temani Afif

哦，奇怪，我以为渐变是抗锯齿的。#你知道得越多 - Olex Ponomarenko

Answer 2

你可以使用CSS三角形放置在页脚上。另外，你也可以将所有内容放在<footer>标签中，并将具有padding和background的内容包装在另一个元素.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>

- Olex Ponomarenko