如何用CSS创建倾斜页脚？解决留白与文本倾斜问题

嘿，这个倾斜页脚的问题我之前也碰到过！两个小问题其实可以用一个优雅的方案一起解决，不用绕弯子去给文本反倾斜，还能完美填满右下角的空白。

问题根源分析 #

1. 右下角留白：直接给页脚容器加transform: skew()时，容器的实际显示形状是倾斜后的，但元素的布局盒模型还是矩形，导致角落出现空白；
2. 文本倾斜/超出：如果给父容器skew后再给文本加反向skew，由于变换原点默认是元素中心，文本会偏移甚至超出容器范围，很难对齐。

最优解决方案：用伪元素做倾斜背景 #

核心思路是把倾斜效果只应用在背景上，文本所在的元素保持正常状态，这样既解决了空白问题，文本也不会倾斜，更不会超出容器。

完整代码示例

<footer class="skewed-footer">
  <div class="footer-content">
    这里是你的页脚文本内容，完全不会被倾斜哦 😊
  </div>
</footer>

.skewed-footer {
  position: relative;
  /* 父容器背景透明，让伪元素的背景显示出来 */
  background: transparent;
  /* 根据需求设置内边距，控制页脚高度 */
  padding: 3rem 0;
  /* 可选：如果伪元素倾斜后超出页面，开启裁剪 */
  overflow: hidden;
}

/* 用伪元素创建倾斜的蓝色背景 */
.skewed-footer::before {
  content: '';
  position: absolute;
  /* 让伪元素完全覆盖父容器 */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #007bff; /* 替换成你的蓝色 */
  /* 设置倾斜角度，这里用负角度让右下角填充，你可以根据需求调整数值 */
  transform: skewY(-10deg);
  /* 关键！设置变换原点为左上角，确保倾斜时右下角被完全填充 */
  transform-origin: top left;
  /* 把背景放在文本下方，不遮挡内容 */
  z-index: -1;
}

.footer-content {
  /* 可选：设置内容的最大宽度，让文本居中对齐 */
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
  /* 这里不需要任何transform，文本自然正常显示 */
}

关键细节说明 #

• transform-origin：设置为top left后，伪元素的倾斜会从左上角开始，右下角会自然延伸填满空白区域；如果设置成其他值（比如默认的center），还是会出现留白，一定要注意这一点；
• z-index：把伪元素的层级设为-1，确保它在文本内容的下方，不会遮挡文字；
• overflow: hidden：如果倾斜角度太大，伪元素可能会超出页面左右两侧，开启这个属性可以裁剪掉多余部分，保持页面整洁。

你可以根据自己的需求调整skewY()的角度数值，以及背景颜色、内边距等样式，这个方案基本上能完美解决你遇到的两个问题～

内容的提问来源于stack exchange，提问作者inhwrbp