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

2024-06-12 05:30| 来源: 网络整理| 查看: 265

利用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

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%); } 请环绕我呈半圆形排列请环绕我呈半圆形排列请环绕我呈半圆形排列请环绕我呈半圆形排列请环绕我呈半圆形排列请环绕我呈半圆形排列请环绕我呈半圆形排列请环绕我呈半圆形排列请环绕我呈半圆形排列请环绕我呈半圆形排列请环绕我呈半圆形排列请环绕我呈半圆形排列请环绕我呈半圆形排列请环绕我呈半圆形排列请环绕我呈半圆形排列请环绕我呈半圆形排列请环绕我呈半圆形排列请环绕我呈半圆形排列请环绕我呈三角形排列请环绕我呈三角形排列请环绕我呈三角形排列请环绕我呈三角形排列请环绕我呈三角形排列请环绕我呈三角形排列请环绕我呈三角形排列请环绕我呈三角形排列请环绕我呈三角形排列请环绕我呈三角形排列请环绕我呈三角形排列请环绕我呈三角形排列请环绕我呈三角形排列请环绕我呈三角形排列请环绕我呈三角形排列请环绕我呈三角形排列请环绕我呈平行四边形形排列请环绕我呈平行四边形形排列请环绕我呈平行四边形形排列请环绕我呈平行四边形形排列请环绕我呈平行四边形形排列请环绕我呈平行四边形形排列请环绕我呈平行四边形形排列请环绕我呈平行四边形形排列请环绕我呈平行四边形形排列请环绕我呈平行四边形形排列请环绕我呈平行四边形形排列请环绕我呈平行四边形形排列请环绕我呈平行四边形形排列请环绕我呈平行四边形形排列请环绕我呈平行四边形形排列请环绕我呈平行四边形形排列请环绕我呈平行四边形形排列

【本文地址】

公司简介

联系我们