我想要实现的效果：
非常相似的问题：
> 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属性将提供一个解决方案但不幸的是,我所知道的浏览器今天都不支持它.
原文链接：https://www.f2er.com/html/426187.html另一种方法是使用目前仅由现代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%);
}