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

问题

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

回答1:

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

来源：https://stackoverflow.com/questions/33629754/text-within-a-non-rectangular-shape-pentagon-or-hexagon

标签

html

css

css3

css-shapes