非矩形形状（五边形或六边形）内的文字

Question

我想要实现的效果：

非常相似的问题：

• How can I wrap text around a non rectangular image? - 但反过来（他们想要包装文字，我想保留文字内容）
• Wrapping text around non-rectangular shapes css/html

潜在的解决方案：

• http://www.csstextwrap.com/ - 有点过时 - 提及IE6和Netscape，未提及Chrome
• http://baconforme.com/

与2015年的Novemeber一样 - 我们能做得更好吗？

我设法找到了关于CSS形状的文章 - http://www.chenhuijing.com/blog/why-you-should-be-excited-about-css-shapes/ - 但它们尚未准备好迎接黄金时段 - http://caniuse.com/#feat=css-shapes - 没有IE，没有Edge，没有Firefox ......

Answer 1

考虑到你想要实现的形状，shape-inside属性会提供一个解决方案，但不幸的是，我所知道的浏览器今天都不支持它。

另一种方法是使用现代webkit浏览器目前仅支持的shape-outside property ：

＆＃13;

＆＃13;

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%);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

有关浏览器支持，请参阅canIuse