CODEWITHSUNDEEP
htmlcssimage
Sherwin Flight
Sherwin Flight

Reputation: 2363

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 showing the layout the I am trying to use.

I want the text to flow the way it does in the image. I did this mock-up in MS Paint.

Each page could have any content on it, so I'd rather not have to manually adjust the text on each page. The top-left corner will always be the same, so ideally there would be a CSS rule I could add that could make the text behave this way no matter what the text content actually was.

enter image description here

Upvotes: 4

Views: 2531

Answers (1)

PTD
PTD

Reputation: 1043

It currently isn't widely supported [96% support in 2022] 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(0 0, 0 100%, 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(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>

Upvotes: 5

Related Questions