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

发布时间：2020-12-14 22:57:34 所属栏目：资源来源：网络整理

导读：我想要实现的效果：非常相似的问题： How can I wrap text around a non rectangular image? 但反过来(他们想要包装文字,我想保留文字内) Wrapping text around non-rectangular shapes css/html 潜在解决方案 http://www.csstextwrap.com/ 有点陈旧提到IE

我想要实现的效果：

text in a pentagon

非常相似的问题：

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

最佳答案

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

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

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 0%);
}
span:after{
    float:right;
    width:200px; height:400px;
    -webkit-shape-outside: polygon(0 0%,100% 0%,100% 100%,100% 40%);
    shape-outside: polygon(0 0%,100% 40%);
}


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


                        （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!