非矩形形状(五边形或六边形)内的文字

Question

我想要实现的效果:

非常相似的问题:

• 如何围绕非矩形图像包装文本？- 但反过来(他们想要包装文字,我想保留文字内)
• 在非矩形形状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-in​​side属性将提供一种解决方案，但不幸的是，我所知没有浏览器支持该解决方案。

另一种方法是使用shape-outside属性，当前仅现代Webkit浏览器支持该属性：

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>

有关浏览器的支持，请参见canIuse