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

概述我想要实现的效果：非常相似的问题：> How can I wrap text around a non rectangular image? - 但反过来(他们想要包装文字,我想保留文字内)> Wrapping text around non-rectangular shapes css/html潜在解决方案> http://www.cs

我想要实现的效果：

非常相似的问题：

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

以上是内存溢出为你收集整理的html – 非矩形形状内的文本(五边形或六边形)全部内容，希望文章能够帮你解决html – 非矩形形状内的文本(五边形或六边形)所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1122616.html