CSS parallelogram with text

Question

I made a parallelogram using the CSS3 transform skew and put the text in another div that has the opposite skew value so that the text remains unformed : Example JSFiddle .

Is there a way for the text to align along the edges of the parallelogram as follows:

I am open to other suggestions, such as using canvas , if this is not possible with CSS. If there is a JavaScript method for this, then any links that may be useful will be useful.

UPDATE: After searching for some cross-browser solutions, the easiest tool I found for this was this tool .

Answer 1

As requested, your answer is to use -webkit-shape-inside : http://hongkiat.com/blog/css3-content-wrapping

Define a polygon with points that match your parallelogram, and your content will fit that shape.

TIP. To get the “points” of your figure, export it as a vector from suitable graphic design software, and there will be coordinates in SVG.