有什么方法可以让 div 中的文本填充三角形？答案

【问题标题】：Any way to have text in div fill a triangle shape?有什么方法可以让 div 中的文本填充三角形？
【发布时间】：2011-09-12 18:05:25
【问题描述】：

我正在尝试让 div 中的文本块填充向下的三角形。有没有办法用 CSS 或 Javascript 来实现这一点？

这适用于用户可以动态插入文本的网站。我试图避免替代方法，即让他们逐行插入文本，每行有一个限制。

【问题讨论】：

【解决方案1】：

我不知道有什么简单的方法可以满足您的要求。我能想到的最好的方法是使用CSS text wrapper 之类的东西，它可以使您的文本适合任何形状。我自己没用过，不知道你会遇到什么问题。

【讨论】：

【解决方案2】：

您的问题与this one 非常相似。

我知道没有 CSS 方法，但你可以用 JavaScript 来做。这个想法是找到每行文本中断的位置并将剩余的文本包装在一个新的子 div 中。您必须使用文本范围来完成它。

【讨论】：

【解决方案3】：

您可以用<span> 包裹文本的每一行并使用边距来接收所需的效果，如果您希望形状具有颜色，请使用 Photoshop 创建具有所需颜色的三角形并将其放在背景上.

【讨论】：

【解决方案4】：

您可以尝试使用 CSS 边框坡度，但我认为它不能完全满足您的需求，因为它有点复杂并且您必须手动换行文本。这种方法here 有一些很好的例子，但它基本上适用于简单的形状，不适用于文本容器。

【讨论】：