一個尺寸為零的元素搭配經過策略性安排的邊框寬度，就是 CSS 邊框三角形背後的完整機制，因此在 CSS 三角形產生器中選擇寬度和高度，意思就是決定該邊框配置的每一邊應該佔用多少像素。寬度值控制水平底邊，高度值控制垂直延伸，而產生器會根據你選擇的方向，將這些數字指派給特定的邊框。垂直三角形會把寬度分配到兩個透明的側邊邊框，水平三角形則會把高度分配到上下兩個透明的邊框，留下一個有色邊框承擔整個指向方向的尺寸。每個邊框在輸出中都會明確寫出，因此當你把 CSS 貼進自己的樣式表時，幾何形狀仍然保持可見且可稽核。因此，選擇尺寸本質上是個邊框算術的問題，而非一般的 box 尺寸計算;理解這種對應關係，才能在產生的 CSS 中看清每個邊框所扮演的角色。
寬度與高度控制項代表什麼
產生器中的兩個數值輸入欄，並不是在描述一般內容盒的繪製尺寸。由於元素的寬度和高度都為零，整個可見的三角形完全是從在中央交會的四個邊框所構成。對於垂直三角形來說，你輸入的度會成為兩個透明側邊邊框的合計寬度，高度則成為有色邊框的度;對於水平三角形來說，你輸入的寬度會成為有色側邊邊框的寬度，高度則成為上下兩個透明邊框的合計寬度。舉例來說，對於向上的三角形，有色底邊會接收完整的高度值，而透明的左、右邊框則合計接收寬度值。因此，輸入數字的意義是為特定的邊框指派像素值，而不是在調整 div 的大小，而這兩個數字之間的關係，才是決定最終箭頭比例的關鍵。閱讀產生的 CSS 可以讓這種對應關係一目了然:每個 longhand 屬性都會展開寫出，讓開發者能驗證是哪個邊框承擔哪個尺寸。
10 到 300 像素的輸入範圍
產生器將寬度與高度都限制在 10 到 300 像素之間(含端點)的整數值。這個範圍定義了工具所接受的最小與最大整數輸入;至於某個給定值是否能融入目標版面，則取決於容器，因為一個 300 像素的邊框仍可能延伸到小元素之外。之所以要求整數，是因為 floor 與 ceiling 的拆分規則是定義在整數之上的，而這個純粹的產生器會拒絕小數寬度，而不是默默地四捨五入。如果特定設計需要更小或更大的三角形，產生的 CSS 是完全可編輯的，因此複製之後，你可以自行在樣式表中手動調整邊框度。這項限制同時也是刻意的測試選擇:當輸入空間維持有限時，要涵蓋四個方向、奇數尺寸、精確輸出以及邊界值的情況，預測性會高出許多。10 像素的下限與 300 像素的上限，只是可接受輸入的下界與上界;這份契約並未聲稱它們能防止鋸齒、邊框消失、相對於周遭 UI 過大的三角形，或不必要的繪製成本。
在產生器中設定三角形尺寸
- 開啟 CSS 三角形產生器，挑選一個方向——上、下、左、右——以符合箭頭在頁面上應該指向的位置。
- 輸入一個介於 10 到 300 之間的整數作為寬度值。對於垂直三角形，這個值會成為合計的水平底邊;對於水平三角形，則會成為有色側邊邊框的長度。
- 輸入一個介於 10 到 300 之間的整數作為高度值。對於垂直三角形，這個值是向上或向下指向的有色邊框;對於水平三角形，則是合計的上下透明邊框。
- 輸入一個以井字號開頭的六位數 HEX 色碼，例如 #1f6feb，並留意只要每個值通過驗證，預就會立即更新。
- 大約以三角形實際擺放時的尺寸與背景來檢視即時預覽，因為在實際情境下判斷比例與對比，會比在預設的白色畫布上更容易評估。
- 分別點擊 Copy CSS 與 Copy HTML 來取得兩段程式碼，接著如果兩份輸出中的 lizely-triangle class 名稱會與現有樣式表中的東西衝突，請一併重新命名。
偶數與奇數尺寸:Floor 與 Ceiling 的數學
有一條小但重要的規則約束著產生器中的奇數總和:當兩個透明側邊邊框需要平均拆分一個奇數像素值時，產生器會把其中一條邊框指派為 floor 值，另一條則為 ceiling 值。一個 41 像素的底邊會產生 20px 與 21px 的透明邊框，而不是兩個 20.5px 的值，這是因為 Chromium 在某些縮放等級與裝置像素比下，可能會把兩個 20.5px 的邊框量化成各 20px。這一個像素的不對稱，保留了所要求的完整繪製尺寸，而不是默默地讓三角形縮了一個像素。偶數尺寸則可以乾淨地拆分，所以一個 40 像素的底邊會產生兩個 20px 的透明邊框，完全沒有四捨五入的瑕疵。如果版面要求像素級完美的幾何，請盡可能偏好偶數總和，並在你的受眾實際使用的縮放等級與 DPR 下驗證繪製結果。
| 要求的底邊 | 透明邊框 | 備註 |
|---|---|---|
| 40px(偶數) | 20px + 20px | 乾淨的整數拆分 |
| 41px(奇數) | 20px + 21px | Floor 與 ceiling 規則 |
| 60px(偶數) | 30px + 30px | 對稱的繪製 |
| 61px(奇數) | 30px + 31px | 單像素不對稱 |
垂直與水平三角形如何使用這些數字
數字的對應關係會依據三角形指向的不同而改變。對於垂直三角形(上與下)，兩個透明側邊邊框加總等於你輸入的度，單一的有色邊框則等於你輸入的高度。對於水平三角形(左與右)，透明的頂端與底端邊框加總等於你輸入的高度，有色的側邊邊框則等於你輸入的寬度。向上使用透明的左、右邊框搭配有色底邊;向下使用有色頂邊;向左使用透明的頂、底邊框搭配有色右邊;向右使用有色左邊。理解這種對應關係後，你就能反向推算所需的尺寸:如果一個工具提示箭頭必須貼齊一個 24 像素高的標籤，只要輸入高度 24 並選擇向上或向下方向，有色邊框就會恰好對上標籤的高度。
| 方向 | 透明邊框 | 有色邊框 | 拆分對象 |
|---|---|---|---|
| 上 | 左 + 右 | 底 | 寬度 |
| 下 | 左 + 右 | 頂 | 度 |
| 左 | 頂 + 底 | 右 | 高度 |
| 右 | 頂 + 底 | 左 | 高度 |
在複製程式碼之前測試尺寸
即時預覽是最快的方式，可以確認你輸入的尺寸確實產生你所想像的三角形。請以大約實際尺寸，並搭配形狀所在位置的背景來檢查，因為一個在白色背景上看起來很清楚的 60 像素紅色箭頭，可能會在品牌色的卡片上消失。邊框是以不透明的 HEX 來繪製，因此這個聚焦的工具不會產生 alpha、漸層、currentColor 以及 CSS 變數——請驗證在複製之後，把字面值替換成設計 token 仍然能正確呈現，並讓透明側邊邊框保持透明。請在 200% 縮放、高對比模式、強制色彩模式，以及常見的行動裝置寬度下測試最終結果，因為即使 CSS 完全相同，在不同的裝置像素比下，點陣化的結果仍可能產生偏移。如果想更深入了解 CSS 中邊框屬性與透明色彩的行為，MDN CSS 背景與邊框指南詳細記載了背後的 longhand 屬性。預只能確認邊框幾何，而無法涵蓋周遭元件的完整無障礙性或版面行為，因此在實際出貨前，請搭配在目標頁面上的視覺檢查。
當尺寸無法滿足需求時的限制與替代方案
邊框三角形雖然精簡，但它的幾何受到零尺寸技巧的限制。元素可量測的內容盒為零，然而它的繪製邊框會佔據空間，這使得 layout、transform、hit testing、outline、overflow 以及對齊，都不像擁有明確 viewBox 的 SVG 那麼直覺。邊框三角形也無法直接產生圓滑的尖端、弧形邊緣、空心形狀、漸層填色、描邊、複雜陰影，或任意的多邊形。如果設計中包含任何這些需求——舉例來說，需要柔和陰影的工具提示箭頭，或帶有圓角的雪佛龍——製作圓角或描邊 CSS 三角形:產生器限制指南有完整的說明;之後，改用 SVG 或 clip-path 並在目標環境中驗證瀏覽器支援，才是務實的做法。數百個裝飾性三角形同樣會增加 DOM 與繪製成本，因此最好使用一個語意控制項搭配單一裝飾形狀，而不是複製多個各自帶有邊框宣告的隱藏控制項。複製之後，尺寸也可以透過包進 CSS 變數，並用 calc() 衍生邊框來達到響應式效果，如此一來，三角形就能跟隨根字型大小縮放，同時保留產生器原本的比例。
延伸閱讀:出貨前應在產生的 CSS 核取方塊中驗證的事項。