如何实现HTML5背景仅底部skew变形且顶部平直（不使用absolute）

我明白你的需求——要让背景底部倾斜，顶部保持平直，同时还能在背景上方正常放置内容，不能破坏正常的文档流对吧？

你当前的问题在于直接给#devheader元素应用了skew变换，这会让整个元素（包括顶部边缘）跟着倾斜，哪怕设置了transform-origin: 0也没法只让底部变形。这里给你一个完美的解决方案，不用修改主元素的布局，用伪元素来实现背景的倾斜效果：

#devheader {
  width: 100%;
  height: 575px;
  position: relative; /* 让伪元素相对于它定位 */
  overflow: hidden; /* 裁剪伪元素超出的部分 */
  /* 主元素无需添加skew变换，保持正常状态，确保顶部平直 */
}

#devheader::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(150deg, #6840e6 43%, #5934b7 65%, #2c089c 85%);
  transform-origin: bottom left; /* 设置变换原点为底部左侧，仅让底部倾斜 */
  transform: skew(0deg, -12deg);
  z-index: -1; /* 将伪元素置于主元素内容下方，不遮挡内容 */
}

方案优势说明 #

• 主元素保持正常流：#devheader没有任何变换，顶部边缘完全平直，你可以在其中正常添加内容，不会受到倾斜影响。
• 伪元素实现背景倾斜：仅对伪元素应用skew变换，结合transform-origin: bottom left，只会让背景底部向右侧倾斜，顶部与主元素保持对齐平直。
• 无溢出问题：overflow: hidden裁剪伪元素倾斜后超出主元素的部分，避免影响页面其他区域。
• 内容不被遮挡：z-index: -1确保背景层在内容下方，完全不影响上方内容的展示。

这样既满足了你“仅底部倾斜、顶部平直”的需求，又完全不影响背景上方内容的正常展示，也没有破坏文档流哦。

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