我正在尝试使用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>
- 我不想让右下角出现白色空白,应该也用蓝色填充。
- 我不想让
footer
中的文字倾斜。我试着通过transform: skew(0deg, 10deg);
来取消文字的倾斜,但这使得文字超出了倾斜的页脚。