前言
如果你一眼就看出這個(gè)是需要怎么做，那這篇文章對你可能沒有用纤垂。
乍看之下，這個(gè)和百分比圓環(huán)圖（之前寫過）好像很相似磷账，但又有細(xì)微的不同峭沦，你沒法使用圓環(huán)圖的實(shí)現(xiàn)思路——兩個(gè)長方形擋住，然后控制旋轉(zhuǎn)來顯示進(jìn)度够颠。
怎么辦熙侍？
這時(shí)候，就需要你隱隱約約想起之前好像有個(gè)屬性履磨，似乎可以達(dá)成這個(gè)效果蛉抓。
實(shí)現(xiàn)思路
先簡單介紹下需要用到的CSS——clip-path 里面有 5種基礎(chǔ)形狀：inset（長方形），circle（圓形）剃诅，ellipse（橢圓）巷送，polygon（多邊形），path（路徑）矛辕。
下面用到的就是這里面最復(fù)雜的笑跛，但也是最萬能的—— path。（其中的路徑指令 這里有詳細(xì)的解釋）
上圖的關(guān)鍵點(diǎn)在于聊品，如何出現(xiàn)一個(gè)扇形飞蹂，下面先給一段css代碼。
clip-path: path("M 46 0 A 46 46 0 1 1 2 60 L 46 46 Z");
上面的代碼翻屈，意思就是路徑以 x=46 y=0 為起點(diǎn)陈哑，順時(shí)針畫一個(gè)半徑為46，結(jié)束點(diǎn)為 x=2 y=60 橢圓弧曲線，最后向 x=46 y=46 的點(diǎn)畫一條直線惊窖，Z 是從當(dāng)前點(diǎn)到第一個(gè)點(diǎn)簡單畫一條直線刽宪。最后出現(xiàn)的就是一個(gè)扇形。
簡單提取下關(guān)鍵代碼：
/**
* @param percent 百分比小數(shù)點(diǎn)
* @param radius 圓的半徑
*/
const arcX = Math.floor(Math.sin(Math.PI * 2 * percent) * radius + radius);
const arcY = Math.floor(radius - Math.cos(Math.PI * 2 * percent) * radius);
這里又出現(xiàn)了萬能的三角函數(shù)知識（之前遇到過）界酒，這樣子就可以計(jì)算得出弧線最后的落腳坐標(biāo)點(diǎn)圣拄。
style={{ clipPath: `path("M ${radius} 0 A ${radius} ${radius} 0 1 1 ${arcX} ${arcY} L ${radius} ${radius} Z")` }}
最后這個(gè) style 放到需要一點(diǎn)一點(diǎn)顯示進(jìn)度的圖形上就好了。
最后
這個(gè)方法可以使用到之前的圓環(huán)圖上毁欣，但思路是完全不一樣的庇谆。
希望這個(gè)屬性給目前沒用到過的人混個(gè)眼熟，留個(gè)印象署辉，日后當(dāng)你需要出現(xiàn)一些特別的形狀或效果時(shí)想起族铆，然后可能會(huì)對你有幫助。
______________________________分割線______________________________
實(shí)戰(zhàn)測試：
下圖中哭尝，選中的狀態(tài)如何做哥攘？（關(guān)鍵就是下邊框的曲線是如何做的）
