在前端根□□□□据设计文□□件的布局□□□和文字图□□□片来制作□□的页面，并添加页丨面的交互□□□效果，其中可能❖需要绘制□□□图形组成□□各种页面□□□效果，譬如代表□□加载的小□□□图标、矩形或者△圆形的按□□□□钮、文字环绕□□□着自定义□□□图形的效□□果和不规□□□则图形的丨鼠标经过□□效果等。简单的圆□□□形、矩形，圆形可以□□□□用border-radius: 50%; 矩形可以□□□□用transform: skewX()设置一个◤角度沿着x轴斜切变□□□□换，形成矩形。圆形和矩□□□□形都还能clip-path: polygon()设置样式✦绘制。文字环绕□□□□自定义图□□□形的效果，则可以用shape-outside和clip-path设置。shape-outside和clip-path是两个CSS属性，可以用来※设置元素□□的形状和◎元素的剪□□□□切。shape-outside的属性是□□□□用来设置□□□□元素的外□□□□部形状，使文本和□□□□其他元素◥可以环绕□□在该形状✦的周围。那么就可□□以使用不□□□同的函数♦来创建不☆同的形状，例如circle()、ellipse()、inset()、polygon()等。这些函数□□□□可以指定□□形状的尺□□寸、位置和角□□度等参数。
例如设置□□□□位置的X坐标、Y坐标，如下图所□□□□示，shape-outside的polygon()函数可以□□□□使浮动元□□□素的文字◉围绕已设□□□置的形状，形成文字△围绕效果，如果只设□□□置了合适□□的shape-outside样式文字□□□就可以环□□□□绕，但是如果□□□有背景颜□□□□色就能看□□□□出来实际□□是没有裁◇切的，那么就需丨要设置clip-path。

clip-path的属性，可以用来◤设置元素□□□的剪切路□□□径，用以裁剪□□出元素的□□□□可以看见□□□□的部分。它可以用◎来创建各◥种形状，例如圆形、椭圆形、多边形等，以及使用SVG路径来定□□义更复杂□□□的形状。图片裁剪□□成不规则※图形，鼠标经过□□□□恢复原样，此过程可□□以添加一□□□□个过渡时△间，如下所示：

Css主要样式如下所示:
Img{
-webkit-clip-path: polygon(43% 0, 62% 0, 52% 26%, 69% 20%, 32% 100%, 42% 40%, 26% 46%);
clip-path: polygon(43% 0, 62% 0, 52% 26%, 69% 20%, 32% 100%, 42% 40%, 26% 46%);
-webkit-transition: all 0.5s;transition: all 0.5s;
}
Img:hover{
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%, 0 100%, 0 100%, 0 100%);
clip-path:polygon(0 0, 100% 0, 100% 100%, 0% 100%, 0 100%, 0 100%, 0 100%);