问题
I'm trying to have a block of text in a div fill a downward triangle shape. Is there any way to achieve this with either CSS or Javascript?
This is for a site in which users can dynamically insert text. I'm trying to avoid the alternative method, which is to have them insert text line by line with a limit on each line.
回答1:
Your question is very similar to this one.
I know of no CSS way, but you can do it with JavaScript. The idea is to find where each line of text breaks and wrap the remaining text in a new child div. You have to use text ranges to accomplish it.
See this demo: http://jsfiddle.net/gilly3/CmguZ/7/
回答2:
I don't know of any simple way to do what you are asking for. The best thing I can think of would be to use something like the CSS text wrapper, which can fit your text to any shape. I haven't used it myself so I don't know what problems you will run into.
回答3:
You could wrap each line of your text with a <span> and use margins to recieve the wanted affect and if you want the shape to have a color use photoshop to create a triangle with the desired color and put it on the background.
回答4:
you can try playing with CSS border slopes, but I don't think it fits your needs entirely, because it's a bit complicated and you have to wrap the text manually. there are some good examples of this method here, but it is for simple shapes basically, not for text containers.
来源：https://stackoverflow.com/questions/7391970/any-way-to-have-text-in-div-fill-a-triangle-shape