如何填补倾斜（skew）div与非倾斜矩形div之间的间隙？

嘿，这个问题我之前做项目时也踩过坑，skew变形后确实容易和相邻的非倾斜元素出现讨厌的空隙，给你几个实用的解决办法，你可以根据自己的场景来选：

方法一：用伪元素实现倾斜（推荐） #

直接给容器加skew会让容器的物理边界变形，导致和其他元素对接时产生间隙。换个思路，让容器本身保持正常布局，用伪元素做倾斜的背景层，这样既保留了倾斜视觉效果，又能和非倾斜元素无缝对接，还不会让容器内的内容跟着倾斜。

示例代码：

.skewed-container {
  position: relative;
  z-index: 1;
  /* 容器保持正常布局，设置需要的宽高、padding等 */
}

.skewed-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #f06292; /* 替换成你的背景色 */
  transform: skewX(-12deg); /* 替换成你的倾斜角度 */
  transform-origin: top right; /* 调整变形原点，避免溢出或间隙 */
  z-index: -1;
}

方法二：调整transform-origin + 负margin修正 #

如果一定要直接skew容器，可以通过调整变形原点，再配合负margin来抵消间隙。不过这个方法需要根据倾斜角度和容器高度计算负margin的数值，适合简单场景。

示例代码：

.skewed-box {
  transform: skewX(-12deg);
  transform-origin: top left; /* 改变变形原点，让倾斜的方向更可控 */
  margin-right: -30px; /* 根据你的倾斜角度和容器高度调整这个值，抵消右侧间隙 */
  background: #f06292;
}

/* 相邻的非倾斜元素可以配合调整内边距，避免内容被遮挡 */
.normal-box {
  padding-left: 30px;
}

方法三：使用clip-path创建倾斜形状 #

用clip-path直接定义元素的倾斜形状，代替skew变形。这种方式是直接裁剪元素的物理边界，所以和相邻元素对接时不会有间隙，而且内容也不会被倾斜。

示例代码：

.skewed-box {
  /* 这个polygon值可以生成右侧倾斜的形状，调整92%的数值可以改变倾斜程度 */
  clip-path: polygon(0 0, 100% 0, 92% 100%, 0% 100%);
  background: #f06292;
  width: 300px;
  height: 150px;
}

如果你的倾斜div里有文本或其他内容，优先选方法一或方法三，这样内容不会跟着倾斜，体验更好~

内容的提问来源于stack exchange，提问作者Anmol Ratan Mohla