Text within a non-rectangular shape (pentagon or hexagon)

Question

Effect I want to achieve:

Very similar questions:

How can I wrap text around a non rectangular image? - but the other way around (they want to wrap text around, I want to keep text inside)
Wrapping text around non-rectangular shapes css/html

Potential solutions:

http://www.csstextwrap.com/ - a bit dated - mentions IE6 and Netscape, does not mention Chrome
http://baconforme.com/

As in Novemeber 2015 - can we do better than that?

I managed to find this article about CSS shapes - http://www.chenhuijing.com/blog/why-you-should-be-excited-about-css-shapes/ - but they are not ready for prime time yet - http://caniuse.com/#feat=css-shapes - no IE, no Edge, no Firefox...

What is the non-rectangular shape? Is it a shape on a`canvas`, is it an image, is it overlapping divs? — Dave Salomon, Nov 10 '15 at 12:18
Considering the shape you want, the CSS [shape-inside](https://drafts.csswg.org/css-shapes-2/#shape-inside-property) property would be great but no browser I know of supports it yet. You can also check out this answer [align text on slanted shape](http://stackoverflow.com/questions/27876883/align-text-on-slanted-shape) — web-tiki, Nov 10 '15 at 12:28

web-tiki · Answer 1 · 2015-11-10T13:09:38.203

Considering the shape you are trying to achieve, the shape-inside property would provide a solution but unfortunatly, no browser I know of supports it today.

Another approach would be to use the shape-outside property which is currently supported by modern webkit browsers only :

p{
    width:400px; height:400px;
    text-align:justify;
    overflow:hidden;
}

span:before, span:after {
  content:'';
}
span:before{
    float:left;
    width:200px; height:400px;
    -webkit-shape-outside: polygon(100% 0%, 0% 40%, 50% 100%, 0 100%, 0 0%);
    shape-outside: polygon(100% 0%, 0% 40%, 50% 100%, 0 100%, 0 0%);
}
span:after{
    float:right;
    width:200px; height:400px;
    -webkit-shape-outside: polygon(0 0%, 100% 0%, 100% 100%, 50% 100%, 100% 40%);
    shape-outside: polygon(0 0%, 100% 0%, 100% 100%, 50% 100%, 100% 40%);
}

<p><span></span>Lorem ipsum dolor sit amet. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna. Vestibulum dapibus, mauris nec malesuada fames ac turpis velit, rhoncus eu, luctus et interdum adipiscing wisi. Aliquam erat ac ipsum. Integer aliquam purus. Quisque lorem tortor fringilla sed, vestibulum id, eleifend justo vel bibendum sapien massa ac turpis faucibus orci luctus non, consectetuer lobortis quis, varius in,sapien massa ac turpis faucibus orci luctus non, consectetuer lobortis quis, varius in, lobortis quis, varius in,sapien massa ac turpis faucibus orci luctus non, consectetuer lobortis quis, varius in, lobortis quis, varius in,sapien massa ac turpis faucibus orci luctus non, consectetuer lobortis quis, varius in, lobortis quis, varius in,sapien massa ac turpis faucibus orci luctus non, consectetuer lobortis quis, varius in</p>

For browser support, see canIuse

Thank you for the answer. I included **caniuse** link on my original question and lack of support in Firefox and IE is probably a **no-go** for me. Interesting read anyway! https://developer.mozilla.org/en-US/docs/Web/CSS/shape-outside — Mars Robertson, Nov 10 '15 at 13:38

Text within a non-rectangular shape (pentagon or hexagon)

As in Novemeber 2015 - can we do better than that?

1 Answers1

Linked