Streaming live at 10am (PST)

Non - square text box?


#1

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)


#2

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

d136v


#3

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?


#4

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: http://sandbox-d16738.webflow.io/

Here is a jsfiddle with the text range done well: http://jsfiddle.net/gilly3/CmguZ/7/

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


#5

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