html - 非矩形(五边形或六边形)内的文本

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 年 11 月一样 - 我们能做得更好吗？

我设法找到这篇关于 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 property 会提供一个解决方案，但不幸的是，据我所知，目前没有浏览器支持它。

另一种方法是使用 shape-outside property目前仅受 现代 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