如何让文本适配旋转容器（蒙版效果不裁剪）？纯HTML/CSS可行吗？

纯HTML+CSS就能搞定，不用SVG或者Canvas。针对你碰到的问题，给你一套可行方案：

问题拆解 #

你之前的两种尝试为啥不行：

• 先转容器再反向转文本：文本排版是按原坐标系来的，自然会超出旋转后的容器边界，没法贴合菱形形状排版。
• 用clip-path：直接把溢出的文本裁掉了，不符合你“不裁剪”的要求。

实现方法 #

核心思路：让文本的排版区域贴合菱形容器的形状，同时保留容器的蒙版视觉效果，允许文本溢出显示。

代码示例 #

<div class="mask-box">
  <div class="text-wrap">
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod 
    tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero 
    eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea 
    takimata sanctus est Lorem ipsum dolor sit amet.</p>
  </div>
</div>

.mask-box {
  width: 300px;
  height: 300px;
  margin: 100px auto;
  /* 用clip-path画出菱形蒙版的视觉效果 */
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  background: #ddd;
  position: relative;
}

.text-wrap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* 旋转文本容器，让排版坐标系贴合菱形 */
  transform: rotate(45deg);
  /* 加内边距，让文本不贴菱形边缘 */
  padding: 50px;
  /* 允许文本溢出，不裁剪 */
  overflow: visible;
}

.text-wrap p {
  margin: 0;
  text-align: center;
  /* 把文本转回来，恢复正常阅读方向 */
  transform: rotate(-45deg);
  /* 限制文本宽度，刚好适配菱形内部 */
  width: calc(100% - 100px);
  margin: 0 auto;
}

方案说明 #

• .mask-box用clip-path做出菱形蒙版的视觉效果，只负责展示形状背景。
• .text-wrap通过旋转，让文本的排版方向贴合菱形，同时开overflow: visible保证溢出文本能显示。
• 内部文本再反向旋转回来，保持正常阅读方向，通过width和padding控制文本在菱形内部的排版范围，避免太贴合边缘。

这样既实现了菱形蒙版的视觉效果，文本会顺着菱形的形状排版，溢出的部分也不会被裁剪，完全符合你的需求。

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