如何使用CSS实现div单侧高度增大的效果

从参考效果图来看，你需要实现的是div单侧向外延伸、视觉上单侧尺寸更大的效果，以下是几种可行的实现方案：

• 方案1：定向padding扩展（适合需要在扩展区域放置内容的场景）
  如果不需要避免布局挤压，直接给需要增大的一侧添加定向padding即可，背景会自动覆盖扩展区域：

.target-div {
  /* 以右侧增大20px为例 */
  padding-right: 20px;
  background-color: #你的背景色;
  background-clip: padding-box;
}

• 方案2：伪元素拼接（最常用，不影响原有文档流布局）
  如果不想改变原div的大小、不想挤开周边元素，可以用绝对定位的伪元素拼接在需要增大的一侧，视觉上和原div连为一体：

.target-div {
  position: relative;
  /* 原div的其他样式保持不变 */
}
/* 以右侧增大为例 */
.target-div::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 100%;
  width: 20px; /* 自定义增大的尺寸 */
  background-color: inherit; /* 继承原div背景，保证视觉统一 */
}

• 方案3：transform缩放（适合动态交互场景，比如hover触发单侧增大）
  如果需要做动态增大效果，可以配合transform-origin设置缩放原点，缩放时只会向单侧延伸：

.target-div {
  /* 原点设为左侧，X轴缩放时只会向右侧延伸 */
  transform-origin: left center;
  transition: transform 0.3s;
}
.target-div:hover {
  /* X轴放大1.1倍，仅右侧尺寸增大 */
  transform: scaleX(1.1);
}

注意：该方案会让div内部内容同步拉伸，如果不需要内容变形，可以给内部子元素添加反向scale抵消缩放效果。

• 方案4：clip-path自定义裁剪（适合不规则单侧增大的需求）
  如果单侧增大的形状有特殊要求（比如斜切、圆角特殊处理），可以用clip-path直接自定义div的可视区域，灵活度最高：

.target-div {
  /* 原div宽度200px时，向右侧多扩展20px，总可视宽度220px */
  clip-path: polygon(0 0, 220px 0, 220px 100%, 0 100%);
}

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