任何方式有文本在div填充三角形形状？

Question

我想在div中填充一个向下三角形的文本块。有什么办法可以用CSS或Javascript来实现这个吗？

这是用户可以在其中动态插入文本的站点。我试图避免使用替代方法，即让它们逐行插入文本，每行限制一行。

Answer 1

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

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

看到这个演示：http://jsfiddle.net/gilly3/CmguZ/7/

Answer 2

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

Answer 3

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

Answer 4

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