Streaming live at 10am (PST)

Non - square text box?


well, the title says it all really - is it possible to create a non-square text box? For example, a triangle in which the text will auto fill and can justify left / right and do all he things that a normal text box would?

Here is my site Read-Only: LINK
(how to share your site Read-Only link)


Not sure I 100% understand. Is this the look you are going for?



yes! exactly, I have a few different shapes to do, not all triangles

how did you do the triangle, and can you do the same with an arbitrary shape?


The only 2 ways I can think of would be using clip-path to form the div into the trianlge. But this won’t give the effect you want. The other way is to use some javascript and jquery to create a text range that calculates the break point and starts a new line.

Here is my example of the clip-path:

Here is a jsfiddle with the text range done well:

Let me know your thoughts and i’ll keep trying some stuff


Thanks! that looks great but im fairly new to web design and webflow so i have never messed with javascript before. might take me a bit of fiddling to implement that code