如何用CSS让文本填充倾斜的漫画面板？

你当前通过反向倾斜内容来保持文本正立，但导致内容无法填充倾斜面板。以下两种方法可实现文本正立且完全填充倾斜形状的需求：

方法一：使用clip-path裁剪内容容器（推荐） #

通过clip-path定义内容容器的倾斜轮廓，无需反向倾斜内容，让文本自然填充裁剪后的区域，同时保持正立。

修改后的完整代码：

* {
  margin: 0;
  box-sizing: border-box;
}

body {
  min-height: 100dvh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card {
  --skew-angle: 20deg;
  background-color: teal;
  transform: skew(calc(-1 * var(--skew-angle)));
  width: 70%;
  overflow: hidden; /* 隐藏溢出内容 */
}

.content {
  padding: 1rem 3rem;
  width: 100%;
  background-color: yellowgreen;
  /* tan(20°)≈0.364，根据倾斜角度计算右侧偏移量，可按需调整 */
  --offset: calc(100% * 0.364);
  /* 裁剪出右侧倾斜的四边形形状 */
  clip-path: polygon(0 0, calc(100% - var(--offset)) 0, 100% 100%, 0 100%);
}

<body>
  <div class="card">
    <div class="content">
      <h2 class="card-title">cool title</h2>
      <p class="card-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed totam praesentium nisi quibusdam explicabo error officia veritatis ut facere nostrum, repellat iusto optio deserunt qui laboriosam maiores vel? Vel quis optio, nulla error totam explicabo ipsam neque eos non magni!</p>
    </div>
  </div>
</body>

核心原理：

• clip-path: polygon() 手动定义内容容器的边缘形状，右侧顶点随倾斜角度偏移，完美匹配面板的倾斜轮廓。
• 无需反向倾斜内容，文本直接填充裁剪后的区域，保持正立状态。

方法二：调整内容宽度配合反向倾斜 #

通过三角函数计算倾斜后的宽度补偿，让反向倾斜的内容容器完全填充面板，同时文本保持正立。

修改后的完整代码：

* {
  margin: 0;
  box-sizing: border-box;
}

body {
  min-height: 100dvh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card {
  --skew-angle: 20deg;
  background-color: teal;
  transform: skew(calc(-1 * var(--skew-angle)));
  width: 70%;
  overflow: hidden; /* 隐藏溢出内容 */
}

.content {
  padding: 1rem 3rem;
  /* cos(20°)≈0.9397，计算内容需要的宽度以填充倾斜后的面板 */
  width: calc(100% / 0.9397);
  background-color: yellowgreen;
  transform: skew(var(--skew-angle)); /* 反向倾斜抵消面板的变形 */
}

核心原理：

• 面板倾斜后视觉宽度会缩小（原宽度 × cos(倾斜角度)），因此内容容器需要按比例加宽，才能在反向倾斜后完全覆盖面板区域。
• 反向倾斜内容容器，抵消面板的倾斜效果，确保文本保持正立。

关键技术总结 #

• clip-path：直接裁剪元素形状，是实现非矩形文本容器最直观的方案，兼容性较好。
• transform: skew()：配合宽度计算，通过反向倾斜抵消面板变形，同时保证内容填充。
• overflow: hidden：避免倾斜后内容溢出面板边界。

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