如何实现文本贴合平行四边形边缘且容器高度自动适配？

你的需求没问题，核心是把背景形状和文本布局分开处理——外层容器负责画平行四边形的视觉效果，内层专门管文本排版，这样既不会让文本变形，容器高度也能随文本自动调整。

之前的代码为啥不行？你直接给带clip-path的容器加固定padding，文本还是在原始矩形盒里排版，结果被clip-path裁掉侧边；用skew的话文本会跟着变形，肯定不符合要求。

下面是能直接用的代码：

HTML #

<div class="parallelogram">
  <div class="text-wrap">
    lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
  </div>
</div>

CSS #

.parallelogram {
  width: 350px;
  background: orange;
  /* 平行四边形裁剪路径，和你原代码一致 */
  clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
  /* 上下留白，左右留空交给内层margin控制 */
  padding: 20px 0;
}

.text-wrap {
  /* 左右margin对应裁剪掉的比例，让文本刚好在平行四边形内部 */
  margin: 0 25%;
  /* 可选：加一点内边距让文本和边缘更舒服 */
  padding: 0 8px;
}

为啥这么写？ #

• 外层用clip-path生成平行四边形，宽度固定但高度会被内层文本自动撑开，完全适配动态内容。
• 内层通过margin: 0 25%把文本限制在平行四边形的有效区域，避开被裁剪的左右部分，文本完全正常排版，不会变形。
• 要是想调整倾斜程度，只需要同步修改clip-path里的百分比和内层的margin百分比就行（比如把25%改成15%，两边的margin也改成0 15%）。

亲测不管文本多长，容器高度都会自动跟着变，文本边缘完美贴合平行四边形轮廓，完全满足你的需求。

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