在div中使用文本填充三角形的任何方法？

Question

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

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

Answer 1

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

Answer 2

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

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

请参阅此演示：http://jsfiddle.net/gilly3/CmguZ/7/

Answer 3

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

Answer 4

你可以尝试使用CSS边界斜坡，但我不认为它完全符合你的需要，因为它有点复杂，你必须手动包装文本。这个方法here有一些很好的例子，但它基本上是简单的形状，而不是文本容器。