我想要实现的效果:
非常相似的问题:
> 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 ……
另一种方法是使用目前仅由现代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%);
}
odo 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,lobortis quis,varius in
原文地址:https://www.jb51.cc/html/426187.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。