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

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

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

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

  1. 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%); }
笔记|利用CSS实现任意形状的文字环绕
文章图片
请环绕我呈半圆形排列
请环绕我呈半圆形排列
请环绕我呈半圆形排列
请环绕我呈半圆形排列
请环绕我呈半圆形排列
请环绕我呈半圆形排列
请环绕我呈半圆形排列
请环绕我呈半圆形排列
请环绕我呈半圆形排列
请环绕我呈半圆形排列
请环绕我呈半圆形排列
请环绕我呈半圆形排列
请环绕我呈半圆形排列
请环绕我呈半圆形排列
请环绕我呈半圆形排列
请环绕我呈半圆形排列
请环绕我呈半圆形排列
请环绕我呈半圆形排列


笔记|利用CSS实现任意形状的文字环绕
文章图片
请环绕我呈三角形排列
请环绕我呈三角形排列
请环绕我呈三角形排列
请环绕我呈三角形排列
请环绕我呈三角形排列
请环绕我呈三角形排列
请环绕我呈三角形排列
请环绕我呈三角形排列
请环绕我呈三角形排列
请环绕我呈三角形排列
请环绕我呈三角形排列
请环绕我呈三角形排列
请环绕我呈三角形排列
请环绕我呈三角形排列
请环绕我呈三角形排列
请环绕我呈三角形排列


笔记|利用CSS实现任意形状的文字环绕
文章图片
请环绕我呈平行四边形形排列
请环绕我呈平行四边形形排列
请环绕我呈平行四边形形排列
请环绕我呈平行四边形形排列
请环绕我呈平行四边形形排列
请环绕我呈平行四边形形排列
请环绕我呈平行四边形形排列
请环绕我呈平行四边形形排列
请环绕我呈平行四边形形排列
请环绕我呈平行四边形形排列
请环绕我呈平行四边形形排列
请环绕我呈平行四边形形排列
请环绕我呈平行四边形形排列
请环绕我呈平行四边形形排列
请环绕我呈平行四边形形排列
请环绕我呈平行四边形形排列
请环绕我呈平行四边形形排列

    推荐阅读