不规则的文字环绕问题

常见的文字环绕效果:

常见的文字环绕效果.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%);
      }