在前端根據(jù)設(shè)計(jì)文件的布局和文字圖片來(lái)制作的頁(yè)面，并添加頁(yè)面的交互效果，其中可能需要繪制圖形組成各種頁(yè)面效果，譬如代表加載的小圖標(biāo)、矩形或者圓形的按鈕、文字環(huán)繞著自定義圖形的效果和不規(guī)則圖形的鼠標(biāo)經(jīng)過(guò)效果等。簡(jiǎn)單的圓形、矩形，圓形可以用border-radius: 50%; 矩形可以用transform: skewX()設(shè)置一個(gè)角度沿著x軸斜切變換，形成矩形。圓形和矩形都還能clip-path: polygon()設(shè)置樣式繪制。文字環(huán)繞自定義圖形的效果，則可以用shape-outside和clip-path設(shè)置。shape-outside和clip-path是兩個(gè)CSS屬性，可以用來(lái)設(shè)置元素的形狀和元素的剪切。shape-outside的屬性是用來(lái)設(shè)置元素的外部形狀，使文本和其他元素可以環(huán)繞在該形狀的周?chē)?。那么就可以使用不同的函?shù)來(lái)創(chuàng)建不同的形狀，例如circle()、ellipse()、inset()、polygon()等。這些函數(shù)可以指定形狀的尺寸、位置和角度等參數(shù)。
例如設(shè)置位置的X坐標(biāo)、Y坐標(biāo)，如下圖所示，shape-outside的polygon()函數(shù)可以使浮動(dòng)元素的文字圍繞已設(shè)置的形狀，形成文字圍繞效果，如果只設(shè)置了合適的shape-outside樣式文字就可以環(huán)繞，但是如果有背景顏色就能看出來(lái)實(shí)際是沒(méi)有裁切的，那么就需要設(shè)置clip-path。

clip-path的屬性，可以用來(lái)設(shè)置元素的剪切路徑，用以裁剪出元素的可以看見(jiàn)的部分。它可以用來(lái)創(chuàng)建各種形狀，例如圓形、橢圓形、多邊形等，以及使用SVG路徑來(lái)定義更復(fù)雜的形狀。圖片裁剪成不規(guī)則圖形，鼠標(biāo)經(jīng)過(guò)恢復(fù)原樣，此過(guò)程可以添加一個(gè)過(guò)渡時(shí)間，如下所示：

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%);