笔记|利用CSS实现任意形状的文字环绕笔记|css

利用CSS的shape-outside属性来实现任意形状的文字环绕
实现效果如下图所示

文章图片

文章图片

文章图片

shape-outside

CSS的shape-outside 属性定义了一个可以是非矩形的形状，相邻的内联内容应围绕该形状进行包装。默认情况下，内联内容包围其边距框; shape-outside提供了一种自定义此包装的方法，可以将文本包装在复杂对象周围而不是简单的框中
详情可以参考以下网站： https://developer.mozilla.org/zh-CN/docs/Web/CSS/shape-outside
http://www.maomao365.com/?p=17168
2. clip-path
【笔记|利用CSS实现任意形状的文字环绕】clip-path属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。
详情可以参考这个网站：https://developer.mozilla.org/zh-CN/docs/Web/CSS/clip-path
源码：

实现任意形状的文字环绕 > *{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%); } 文章图片请环绕我呈半圆形排列请环绕我呈半圆形排列请环绕我呈半圆形排列请环绕我呈半圆形排列请环绕我呈半圆形排列请环绕我呈半圆形排列请环绕我呈半圆形排列请环绕我呈半圆形排列请环绕我呈半圆形排列请环绕我呈半圆形排列请环绕我呈半圆形排列请环绕我呈半圆形排列请环绕我呈半圆形排列请环绕我呈半圆形排列请环绕我呈半圆形排列请环绕我呈半圆形排列请环绕我呈半圆形排列请环绕我呈半圆形排列文章图片请环绕我呈三角形排列请环绕我呈三角形排列请环绕我呈三角形排列请环绕我呈三角形排列请环绕我呈三角形排列请环绕我呈三角形排列请环绕我呈三角形排列请环绕我呈三角形排列请环绕我呈三角形排列请环绕我呈三角形排列请环绕我呈三角形排列请环绕我呈三角形排列请环绕我呈三角形排列请环绕我呈三角形排列请环绕我呈三角形排列请环绕我呈三角形排列文章图片请环绕我呈平行四边形形排列请环绕我呈平行四边形形排列请环绕我呈平行四边形形排列请环绕我呈平行四边形形排列请环绕我呈平行四边形形排列请环绕我呈平行四边形形排列请环绕我呈平行四边形形排列请环绕我呈平行四边形形排列请环绕我呈平行四边形形排列请环绕我呈平行四边形形排列请环绕我呈平行四边形形排列请环绕我呈平行四边形形排列请环绕我呈平行四边形形排列请环绕我呈平行四边形形排列请环绕我呈平行四边形形排列请环绕我呈平行四边形形排列请环绕我呈平行四边形形排列