Question

Any idea how can i make a text wrap inside a rotated div.
Text won’t stay inside div after rotated..
Here’s a screen of the idea…

Thanks in advance..

Answer 1

The only thing that comes to my mind to solve this problem are CSS Regions (http://html.adobe.com/webstandards/cssregions/).

I’ve set up a small demo to show you how it works, here’s the code:

div {
    -webkit-shape-inside: polygon(0% 50%, 50% 100%, 100% 50%, 50% 0%);
}

And here’s the demo: http://jsfiddle.net/sandro_paganotti/ABdgB/.

Unfortunately it works only on the latest Chrome, plus you have to manually enable ‘Enable experimental WebKit feature’ in your chrome://flags panel.