如何让文本在CSS三角形内沿边框对齐换行？平行四边形示例效果不佳

嘿，我懂你想要实现文本沿着三角形边框自动换行对齐的需求——之前用平行四边形的skew变换确实搞不定三角形，毕竟三角形的形状太特殊了，只有三条边还带尖角，skew只能处理四边平行的结构，自然达不到你想要的效果。下面给你两个靠谱的方案，亲测有效：

方法一：CSS shape-outside（填充式排版，推荐） #

这个CSS属性专门用来让文本环绕自定义形状，完美适配三角形的内部填充需求。我们可以通过polygon()函数定义三角形的顶点坐标，让文本自动贴合边缘排列。

代码实现 #

CSS部分：

/* 容器：控制三角形的大小和位置 */
.triangle-wrap {
  width: 300px;
  height: 300px;
  position: relative;
  margin: 50px auto;
}

/* 三角形形状：用clip-path和shape-outside定义形状 */
.triangle-shape {
  width: 100%;
  height: 100%;
  background-color: #ccc;
  /* 定义等腰三角形的三个顶点：顶部中点、左下角、右下角 */
  shape-outside: polygon(50% 0%, 0% 100%, 100% 100%);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  position: absolute;
  top: 0;
  left: 0;
}

/* 文本容器：让文本填充并贴合形状 */
.triangle-text {
  padding: 20px;
  text-align: justify;
  float: left;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

HTML部分：

<div class="triangle-wrap">
  <div class="triangle-shape"></div>
  <div class="triangle-text">
    这里是你要放在三角形内的任意文本，不管长度多少，它都会自动沿着三角形的边框形状对齐并换行，完全贴合三角形的斜边和底部边缘，解决了你之前平行四边形方法的局限。
  </div>
</div>

方法二：SVG + 文本路径（沿边框线排版） #

如果你想要文本沿着三角形的每条边框线排列（而不是填充内部），可以用SVG的<textPath>元素，能实现更精细的路径排版效果。

代码实现 #

<svg width="300" height="300" viewBox="0 0 300 300">
  <!-- 绘制三角形背景 -->
  <polygon points="150,0 0,300 300,300" fill="#ccc" stroke="#333" stroke-width="2"/>
  
  <!-- 顶部边的文本 -->
  <text font-size="14" fill="#333">
    <textPath href="#top-path" startOffset="50%" text-anchor="middle">顶部边框的文本</textPath>
  </text>
  
  <!-- 左侧边的文本 -->
  <text font-size="14" fill="#333">
    <textPath href="#left-path" startOffset="50%" text-anchor="middle" writing-mode="vertical-rl">左侧边框的文本</textPath>
  </text>
  
  <!-- 右侧边的文本 -->
  <text font-size="14" fill="#333">
    <textPath href="#right-path" startOffset="50%" text-anchor="middle" writing-mode="vertical-rl">右侧边框的文本</textPath>
  </text>
  
  <!-- 定义三条边框的路径（隐藏不可见） -->
  <path id="top-path" d="M150,0 L0,300" fill="none"/>
  <path id="left-path" d="M0,300 L300,300" fill="none"/>
  <path id="right-path" d="M300,300 L150,0" fill="none"/>
</svg>

为啥之前的平行四边形方法不行？ #

你之前用的skew变换是通过倾斜元素模拟平行四边形，这种变换是线性倾斜，只能保持元素的四边平行，没法生成三角形这种三边带尖角的形状。而且内部文本的反倾斜也只能还原平行排列的文本，根本没法贴合三角形的斜边和尖角，所以效果自然不尽如人意。

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