如何解决倾斜div内转正文本的内容溢出问题？

当给容器应用transform: skewX(-30deg)倾斜，再给内部段落用transform: skewX(30deg)转正文本时，会出现文本超出容器范围的问题；若给容器加overflow:hidden，又会导致文本被不合理裁剪。

最优解决方案：用伪元素实现倾斜背景，容器保持正常布局 #

这种方法让容器本身不做倾斜变换，仅通过伪元素模拟倾斜的视觉效果，内部文本自然适配容器宽度，彻底避免溢出和裁剪问题。

.leftStyle {
  background: transparent; /* 原背景色移到伪元素 */
  margin: 100px auto;
  border: none; /* 边框也通过伪元素实现 */
  width: 300px;
  height: 400px;
  left: 100px;
  top: 0px;
  position: absolute;
  overflow: hidden; /* 隐藏伪元素超出部分 */
}

.leftStyle::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #CCC;
  border: 1px solid #000;
  transform: skewX(-30deg);
  z-index: -1; /* 让伪元素在文本下方 */
}

.leftStyle p {
  padding: 0 20px; /* 可选：添加内边距优化排版 */
}

<div class="leftStyle">
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime in blanditiis tempore adipisci nihil, eveniet exercitationem minima perspiciatis velit illum, totam quod numquam, alias enim tenetur voluptatibus autem tempora! Eaque, facere? Alias, adipisci
    praesentium animi, esse quaerat pariatur obcaecati, reiciendis excepturi placeat eos sint. Eaque dolorem id officiis ex nemo, voluptates facere ipsam saepe. Ullam iure amet illo aut voluptate, corrupti dolorem iste dolores tempore molestias nemo error
    exercitationem temporibus.</p>
</div>

原理说明 #

• 容器本身保持常规的盒模型布局，文本正常排版，不会出现溢出问题。
• 伪元素覆盖整个容器区域，通过transform: skewX(-30deg)实现倾斜效果，并用z-index: -1置于文本下方，不影响文本的交互和排版。

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