How to make text wrap around an irregular shape in CSS
I'm trying to figure out how to get the text to move on an irregular shape on the page and I don't really like figuring out how to do what I am trying to do.
I have attached an image showing the layout I am trying to use.
I want the text to flow as it appears in the image. I made this layout in MS Paint.
Each page can contain any content, so I don't have to manually adjust the text on each page. The top-left corner will always be the same, so ideally a CSS rule could be added that could make the text behave this way regardless of what the text content actually was.
source to share
It is not widely supported at this time, but you can use a CSS declaration shape-outside
to achieve your desired effect:
Please note that this is just an example and not an exact solution to your problem.
.element{
shape-outside: polygon(0 0, 0 100%, 100% 100%);
width: 20em;
height: 40em;
}
This will create a triangular area (3-sided polygon) that the text will not fit into. A polyfill is available on github for browsers that don't support this feature.
There are some good articles on the Internet shape-outside
, especially on HTML5 Rocks and A List Apart .
There is also a similar question on SO that was asked a couple of years ago, which might be helpful.
Edit: Added code snippet - example works in Chrome only without polyfill
.wrapper {
width: 300px;
}
.element {
shape-outside: polygon(0 0, 100px 0, 0 100px);
width: 100px;
height: 100px;
float:left;
}
<div class="wrapper">
<div class="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>
source to share
I found a solution with this online tool: http://www.csstextwrap.com/
You use the site to define the parameters you want, and then just copy the required code into your site.
source to share