程序员经验分享-hwhale

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

2024-04-26

我想要达到的效果：

非常相似的问题：

  • 如何将文本环绕在非矩形图像周围？ https://stackoverflow.com/questions/9129862/how-can-i-wrap-text-around-a-non-rectangular-image- 但反过来（他们想将文本环绕，我想将文本保留在里面）
  • 在非矩形形状周围环绕文本 css/html https://stackoverflow.com/questions/21079382/wrapping-text-around-non-rectangular-shapes-css-html

潜在的解决方案：

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

就像 2015 年 11 月一样——我们能做得更好吗？

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


考虑到您想要实现的形状，内部形状 https://drafts.csswg.org/css-shapes-2/#shape-inside-property属性将提供一个解决方案，但不幸的是，目前我所知道的浏览器均不支持它。

另一种方法是使用形状外部属性 http://www.w3.org/TR/css-shapes-1/#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 http://caniuse.com/#feat=css-shapes

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

html

css

cssshapes

非矩形形状（五边形或六边形）内的文本 的相关文章