利用CSS实现任意形状的文字环绕
发布时间：2022-09-04 21:00
利用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
源码：
<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>