Text in non-rectangular shape (pentagon or hexagon)

Question

The effect I want to achieve:

Very similar questions:

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

Potential solutions:

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

---

Like Novemeber 2015 - can we do better than this?

I managed to find this article about CSS forms - 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 ...

Answer 1

Given the shape you are trying to achieve, the shape-inside property will provide a solution, but unfortunately no browser that I know supports it today.

Another approach would be to use the shape-outside property , which is currently only supported by modern website browsers .

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