How To Get Text To Flow Around Irregular Shape In Css

I'm trying to figure out how to get text to flow around an irregular shape on a page, and am not having much luck figuring out how to do what I am trying to do. I attached an image

Solution 1:

It currently isn't widely supported but you could use the shape-outside CSS declaration to achieve the desired effect:

Note this is only an example and not the exact solution to your problem

.element{
    shape-outside: polygon(00, 0100%, 100%100%);
    width: 20em;
    height: 40em;
}

This would create a triangular area (three-sided polygon) that the text would not enter. A polyfill is available on github for browsers that don't support this feature.

There are a few good articles on the web about shape-outside, notably on HTML5 Rocks and A List Apart.

There is also a similar question on SO that was asked a couple of years ago, which could be of some use.

Edit: Added code snippet - the example appears to work in Chrome only without the polyfill

.wrapper {
    width: 300px;
}

.element {
    shape-outside: polygon(00, 100px0, 0100px);
    width: 100px;
    height: 100px;
    float:left;
}

<divclass="wrapper"><divclass="element"></div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div>

Solution 2:

I found solution using this online tool: http://www.csstextwrap.com/

You use the site to determine the settings you want, then just copy the necessary code into your website.