使用CSS skew属性变形容器后，如何限制其不超出原宽度？

要实现skew变形后容器外边缘不超出原宽度，且无需依赖已知高度计算margin，推荐使用伪元素承载变形+容器裁剪的纯CSS方案，适配高度未知的场景：

方法1：伪元素实现skew效果，容器保持原尺寸 #

通过给容器添加伪元素，让伪元素执行skew变形并超出容器，再利用容器的overflow: hidden裁剪超出部分，容器本身始终保持原宽度，高度自适应内容。

代码示例 #

/* 容器：保持原尺寸，负责裁剪超出部分 */
.skew-container {
  width: 300px; /* 你的原宽度 */
  height: auto; /* 高度自适应内容 */
  position: relative;
  overflow: hidden;
}

/* 伪元素：承载skew变形，作为背景/内容载体 */
.skew-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: -15%; /* 向左偏移，抵消skew带来的右侧超出 */
  width: 130%; /* 宽度放大，确保完全覆盖容器 */
  height: 100%;
  background: red; /* 替换为你的背景样式 */
  transform: skew(-10deg); /* 按需调整skew角度 */
  z-index: -1; /* 放在内容下方，不遮挡内部元素 */
}

/* 可选：如果内部内容不需要变形，添加反向skew恢复正常排版 */
.skew-container .content {
  transform: skew(10deg); /* 与伪元素的skew角度数值相同、方向相反 */
  padding: 20px; /* 按需添加内边距 */
}

原理说明 #

• 容器设置overflow: hidden，会自动裁剪伪元素超出容器边界的部分，确保容器外边缘不超出原宽度。
• 伪元素的left偏移和width放大值可根据skew角度微调，只要保证变形后的伪元素能完全覆盖容器即可，无需精确计算。

方法2：使用clip-path裁剪超出部分 #

如果不想用伪元素，也可以直接对容器执行skew，再通过clip-path手动裁剪掉超出原宽度的角落。但这种方法需要根据skew角度估算裁剪坐标，适合角度固定的场景：

代码示例 #

.skew-box {
  width: 300px;
  height: auto;
  background: red;
  transform: skew(-10deg);
  /* 裁剪多边形：左上、右上、右下（向内收）、左下（向内收） */
  clip-path: polygon(0 0, 100% 0, calc(100% - 30px) 100%, 30px 100%);
}

注意事项 #

• clip-path中的30px是根据skew角度估算的偏移值，若角度变化需要手动调整；若要完全精确，需结合JS计算三角函数值动态设置。

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