利用CSS的shape-outside属性来实现任意形状的文字环绕 实现效果如下图所示
shape-outsideCSS的shape-outside 属性定义了一个可以是非矩形的形状，相邻的内联内容应围绕该形状进行包装。 默认情况下，内联内容包围其边距框; shape-outside提供了一种自定义此包装的方法，可以将文本包装在复杂对象周围而不是简单的框中 详情可以参考以下网站： https://developer.mozilla.org/zh-CN/docs/Web/CSS/shape-outside http://www.maomao365.com/?p=17168 2. clip-path
clip-path属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。 详情可以参考这个网站：https://developer.mozilla.org/zh-CN/docs/Web/CSS/clip-path 源码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>实现任意形状的文字环绕</title> <style> *{padding: 0px;margin: 0px;} .box1{width:500px;} #img01{width: 250px; height:250px; margin:10px; float:left; border-radius: 50%; shape-outside: border-box; } .box2{width:500px;} #img02{width: 250px; height:250px; margin:10px; float:left; /*polygon：多边形 多角形*/ shape-outside: polygon(0 100%,50% 0,100% 100%,0 100%); clip-path: polygon(0 100%,50% 0,100% 100%); } .box3{width:500px;} #img03{width: 250px; height:250px; float:left; shape-outside: polygon(0 100%,50% 0,100% 0,50% 100%); clip-path: polygon(0 100%,50% 0,100% 0,50% 100%); } </style> </head> <body> <div class="box1"> <img src="pic01.jpg" id="img01"> <div>请环绕我呈半圆形排列</div> <div>请环绕我呈半圆形排列</div> <div>请环绕我呈半圆形排列</div> <div>请环绕我呈半圆形排列</div> <div>请环绕我呈半圆形排列</div> <div>请环绕我呈半圆形排列</div> <div>请环绕我呈半圆形排列</div> <div>请环绕我呈半圆形排列</div> <div>请环绕我呈半圆形排列</div> <div>请环绕我呈半圆形排列</div> <div>请环绕我呈半圆形排列</div> <div>请环绕我呈半圆形排列</div> <div>请环绕我呈半圆形排列</div> <div>请环绕我呈半圆形排列</div> <div>请环绕我呈半圆形排列</div> <div>请环绕我呈半圆形排列</div> <div>请环绕我呈半圆形排列</div> <div>请环绕我呈半圆形排列</div> </div> <br><br><hr> <div class="box2"> <img src="pic02.jpg" id="img02"> <div>请环绕我呈三角形排列</div> <div>请环绕我呈三角形排列</div> <div>请环绕我呈三角形排列</div> <div>请环绕我呈三角形排列</div> <div>请环绕我呈三角形排列</div> <div>请环绕我呈三角形排列</div> <div>请环绕我呈三角形排列</div> <div>请环绕我呈三角形排列</div> <div>请环绕我呈三角形排列</div> <div>请环绕我呈三角形排列</div> <div>请环绕我呈三角形排列</div> <div>请环绕我呈三角形排列</div> <div>请环绕我呈三角形排列</div> <div>请环绕我呈三角形排列</div> <div>请环绕我呈三角形排列</div> <div>请环绕我呈三角形排列</div> </div> <br><br><hr> <div class="box3"> <img src="pic03.jpg" id="img03"> <div>请环绕我呈平行四边形形排列</div> <div>请环绕我呈平行四边形形排列</div> <div>请环绕我呈平行四边形形排列</div> <div>请环绕我呈平行四边形形排列</div> <div>请环绕我呈平行四边形形排列</div> <div>请环绕我呈平行四边形形排列</div> <div>请环绕我呈平行四边形形排列</div> <div>请环绕我呈平行四边形形排列</div> <div>请环绕我呈平行四边形形排列</div> <div>请环绕我呈平行四边形形排列</div> <div>请环绕我呈平行四边形形排列</div> <div>请环绕我呈平行四边形形排列</div> <div>请环绕我呈平行四边形形排列</div> <div>请环绕我呈平行四边形形排列</div> <div>请环绕我呈平行四边形形排列</div> <div>请环绕我呈平行四边形形排列</div> <div>请环绕我呈平行四边形形排列</div> </div> </body> </html>