常见的文字环绕效果:
常见的文字环绕效果.png
1.圆形环绕效果
image.png
css代码:
.photo {
float: left;
shape-outside: circle(50%);
clip-path: circle(50%);
}
2.椭圆形文字环绕
椭圆形文字环绕.png
css代码:
.photo {
height: 200px;
width: 200px;
float: left;
shape-outside: ellipse(70px 100px);
clip-path: ellipse(50px 80px);
}
3.三角形文字环绕
三角形文字环绕.png
.photo {
height: 200px;
width: 200px;
float: left;
shape-outside: polygon(0 0, 100% 100%, 0 100%);
clip-path: polygon(0 0, 100% 100%, 0 100%);
}
