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

回答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(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>

回答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.

来源：https://stackoverflow.com/questions/29852864/how-to-get-text-to-flow-around-irregular-shape-in-css

标签

html

css

image