渴望下一批？我們仍在研究Shape（）函數(shù)，特別關注ARC命令。如果您吸收了第一部分，我們將直接潛入構建更多複雜的形狀！

作為參考，截至2025年5月，Chrome 137和Safari 18.4中支持Shape（）函數(shù)。

部門形狀

這種形狀通常在餅圖中看到。

顯然，我們在這裡有一個弧線。有兩個固定點，一個固定點根據(jù)行業(yè)的滿足程度而變化。

代碼看起來像這樣：

 <code>.sector { --v: 35; /* [0 100]*/</code>方面比例：1;
剪輯路徑：形狀（從頂部，弧到R的XY，線到中間）；
}

我們設置了一個控制扇區(qū)填充級別的變量，範圍從0到100。要繪製形狀，我們從頂部開始，創(chuàng)建一個弧線到點（x，y），然後移至中心。

我們可以使用諸如頂部和中心之類的關鍵字值嗎？

絕對地！與polygon（）函數(shù)不同，Shape（）函數(shù)支持與背景位置相似的典型情況，例如頂部，底部，左，左，左，左，左，左，左，左，左，左，左，左，左，左，左，左，左，左，左，左，左，左，左，左，左，左，左，左，左，左，左，左，左，左，左，左，左，左右。無需詳細說明，但是知道這會使您的形狀代碼更容易。

弧線的半徑應為50％。對於平方元素，該扇區(qū)是圓圈的一部分，需要填充整個元素，因此半徑等於寬度的一半（或高度）。 ¹

該點在這個圓圈內，其位置取決於V值。沒有無聊的數(shù)學細節(jié)，這是x和y的公式：

 <code>X = 50% 50%<em> sin(V</em> 3.6deg) Y = 50% - 50%<em> cos(V</em> 3.6deg)</code>

我們的代碼轉換為：

 <code>.sector { --v: 35; /<em> [0 100]</em> /</code><p>方面比例：1;
剪輯路徑：形狀（從頂部，
弧到計算（50％50％ <em>SIN（VAR（-V）</em> 3.6攝氏度）） 
計算（50％-50％ <em>cos（var（-v）</em> 3.6維））為50％，
線到中間）；
}</p>

嗯，結果並不理想，但是沒有編碼錯誤。你能發(fā)現(xiàn)缺少什麼嗎？

這是弧的大小和方向！

回想起上一篇文章的建議嗎？這些總是會帶來挑戰(zhàn)，但是嘗試不同的組合通?？梢越鉀Q它們。對於我們來說，我們需要：小型CW。

更好的！讓我們嘗試更多的值以觀察形狀的行為：

糟糕，有些價值觀效果很好，但有些值不得。方向應該是順時針方向的，但也許我們應該使用大型而不是??？讓我們嘗試：

仍然不起作用。之所以出現(xiàn)問題，是因為我們正在基於V值移動一個ARC點，從而為ARC命令創(chuàng)建不同的配置。

這是一個互動演示，可以更好地可視化：

當您調整值時，請注意，CW總是嘗試遵循兩個點之間的較大弧線，而小的CW遵循較小的CW。當值低於50時，小型CW提供了一個很好的結果，但是當超過50時，大型CW的效果更好。

我知道，這很棘手，我選擇了這個例子來突出使用ARC如何導致許多頭痛。但是，我們遇到的問題越多，解決這些問題就越好。

這裡的解決方案很簡單。繼續(xù)使用大型CW，並在元素中添加邊框-Dradius。如果您檢查以前的演示，您會發(fā)現(xiàn)，即使大型CW並不能產(chǎn)生完美的結果，也會填充所需的區(qū)域。我們需要做的就是夾住多餘的空間，而簡單的邊界則是：50％的人實現(xiàn)這一目標！

我將盒子陰影保持在適當?shù)奈恢?，以便我們可以看到弧線，但是很明顯，邊界 - 拉迪烏斯在主體形狀上產(chǎn)生了顯著差異。

有一個最終的邊緣案例要解決。當值等於100時，兩個弧點都具有相同的坐標，這是有意義的，因為該扇區(qū)已滿並形成一個圓。但是，當發(fā)生這種情況時，弧線從定義上沒有任何作用，我們也不會得到一個完整的圈子。

為了解決此問題，我們可以將價值限制為99.99，以避免達到100。

 <code>.sector { --v: 35; /<em> [0 100]</em> /</code><p> -_ V：min（99.99，var（-v））;
方面比例：1;
剪輯路徑：形狀（從頂部，
弧到計算（50％50％ <em>SIN（var（-_ V）</em> 3.6攝氏度）） 
計算（50％-50％ <em>cos（var（-_ v）</em> 3.6維格））為50％大CW，
線到中間）；
邊界拉迪烏斯：50％；
}</p>

現(xiàn)在我們的形狀是完美無瑕的！別忘了，您也可以將其應用於圖像元素：

弧形

與扇形形狀相似，我們可以創(chuàng)建一個弧形。由於我們正在使用ARC命令，因此必須這樣做。

我們已經(jīng)擁有一半的代碼，因為它本質上是沒有內部部分的扇形形狀。我們只需要添加命令即可切出內部部分。

 <code>.arc { --v: 35; --b: 30px;</code><p> -_ V：min（99.99，var（-v））;
方面比例：1;
剪輯路徑：形狀（從頂部，
弧到計算（50％50％ <em>SIN（var（-_ V）</em> 3.6攝氏度）） 
計算（50％-50％ <em>cos（var（-_ v）</em> 3.6維格））為50％CW，</p><pre class="brush:php;toolbar:false"> <code>line to calc(50% (50% - var(--b)) * sin(var(--_v) * 3.6deg)) calc(50% - (50% - var(--b)) * cos(var(--_v) * 3.6deg)), arc to 50% var(--b) of calc(50% - var(--b)) large</code>

）； 邊界拉迪烏斯：50％； }

從扇區(qū)的形狀中，我們刪除線以中心段，並用另一個行命令替換為內圓上的點。如果將其坐標與上點進行比較，您會注意到與-b相等的偏移，該偏移定義了ARC的厚度。然後，我們沿相反方向（CCW）繪製弧線，直到點50％var（-b），這也是從頂部等於-b的偏移。

我尚未指定第二弧的方向，因為瀏覽器將默認為CCW。

啊，我們遇到的同一問題再次抬起頭！並非所有值由於我們之前討論過的相同推理而產(chǎn)生良好的結果，而且您????可以看到，Border-Radius無法解決。這次，我們需要一種根據(jù)該值有條件調整弧的大小的方法。當V超過50時，它應該很大，否則應該很小。

CSS的條件？是的，他們有可能！首先，讓我們像這樣轉換V值：

 <code>--_f: round(down, var(--_v), 50)</code>

該值在[0 99.99]範圍內（請記住，我們不想達到100）。我們使用Round（）來確保它始終是特定值的倍數(shù)，在我們的情況下為50。如果值小於50，則結果為0；否則，是50。

只有兩個可能的值，因此我們可以輕鬆添加條件。如果-_ f等於0，我們使用??；否則，我們使用大：

 <code>.arc { --v: 35; --b: 30px;</code><p> -_ V：min（99.99，var（-v））;
-_f：圓形（down，var（-_v），50）;
-_ c：if（style（-_f：0）：small; else; else：大）;
剪輯路徑：形狀（從頂部，
弧到計算（50％50％ <em>SIN（var（-_ V）</em> 3.6攝氏度）） 
計算（50％-50％ <em>COS（var（-_v）</em> 3.6維格））為50％CW var（-_c），
線至計算（50％（50％-var（-b）） <em>sin（var（var（-_v）</em> 3.6DEG））） 
計算（50％ - （50％ -  var（-b）） <em>cos（var（-_v）</em></p>

以上是更好的CSS形狀使用Shape（） - 第2部分：有關弧的更多信息的詳細內容。更多資訊請關注PHP中文網(wǎng)其他相關文章！