當你使用 CSS 三角形產生器時，41 像素的底邊並不會悄悄地被四捨五入成 40 像素。產生器會將奇數總和拆成下限與上限的邊框寬度 — 例如，在 41 像素的底邊上拆成 20 像素與 21 像素 — 使繪製出的尺寸與你輸入的數字一致。這一點很重要，因為 Chromium 可能會將兩個 20.5 像素的邊框量化為各 20 像素，這會無聲地將形狀縮減整整一個像素，並在底邊留下一道細微的縫隙或鋸齒狀邊緣。產生器的實作會在寫入 CSS 之前預先拆解運算，明確地展開每一個 longhand 邊框，並且在即時預覽與複製的程式碼中使用相同的衍生數值。奇數的寬度、高度或底邊會被刻意保留為一個像素的不對稱，而不是被摺疊成瀏覽器可能捨去的單一四捨五入值。這項技巧在支援範圍內的任意奇數總和(從 10 到 300 像素)都適用，而且產生的三角形，其量測出的底邊會與要求的底邊一致到最後一個像素。本文將帶你了解像素量化問題、上下限拆分技巧本身，以及如何精準產生一個即使底邊為奇數，尺寸依然保持精確的三角形。
像素量化問題
瀏覽器以整數像素繪製 CSS 邊框。當產生器為邊框指定像 20.5 像素這類帶小數的值時，渲染引擎必須決定要進位到 21 還是捨去到 20，而且它在軸線兩側的選擇未必相同。如果產生器將兩個透明的側邊邊框都寫成 20.5 像素，並預期產生的底邊會是 41 像素，Chromium 可能會將兩個邊框都捨去為 20 像素，這會無聲地將繪製尺寸縮減整整一個像素。可見的結果是，三角形比你輸入的數字窄了一個像素，加上底邊處出現一個小的不對稱，因為 20 與 20 接到了一個本應為 41 的彩色邊框上。
此行為記載於 CSS 背景與邊框規範中，該規範定義了邊框寬度如何序列化與渲染 (W3C:CSS Backgrounds and Borders Level 3)。MDN 的背景與邊框指南也指出，透明色與邊框寬度會以難以察覺的方式與盒模型互動 (MDN:CSS backgrounds and borders)。對三角形產生器的結論很簡單:永遠不要假設兩個相同的小數邊框會被每個渲染引擎如實相加。
上下限拆分如何運作
上下限拆分避開了這個假設，做法是將其中一個帶小數的半邊，替換成比另一個大一個像素的整數。以 41 像素的底邊作為演練範例。產生器並不是寫兩個 20.5 像素的邊框，而是寫一個 20 像素邊框和一個 21 像素邊框。算式是 20 加 21，等於 41，也就是原本的總和。一個像素的不對稱在渲染形狀上不可見，因為兩個透明邊框都在頂點與底邊接上同一個彩色邊框;人眼在透明邊緣上感受不到 20 對 21 的拆分。
偶數總和會被精準地拆成兩半，因為下限與上限會塌縮成同一個整數。40 像素的底邊會變成兩個 20 像素邊框，運算式呈現為乾淨的 50/50 分配。產生器在整數像素空間內套用此規則(輸入本身必須是 10 到 300 之間的整數)，所以輸出 CSS 中永遠不會出現帶小數的邊框。
彩色邊框(構成三角形的指向邊)會以所選的完整高度或寬度來寫入。透明側邊框不會繪製顏色，所以它們唯一的角色是佔據空間並形成斜率。可見的形狀因此由彩色邊框的尺寸決定，而底邊尺寸則由兩個透明邊框的總和決定。只要該總和是精確的，底邊就是精確的。
產生底邊精確的奇數三角形
以下是在渲染輸出中產生奇數底邊依然精確的三角形的具體步驟。這些步驟直接使用 CSS 三角形產生器 的介面。
- 從可用控制項中挑選一個方向(上、下、左或右)。方向決定哪個邊框為彩色，哪兩個為透明。
- 在寬度與高度欄位中輸入整數值。接受 10 到 300 之間的整數值;產生器會拒絕小數。
- 若你想要奇數底邊，在控制底邊的尺寸欄位中輸入奇數。對於垂直三角形(上或下)，底邊是所選的寬度;對於水平三角形(左或右)，底邊是所選的高度。
- 以 #RRGGBB 格式輸入六位數的 HEX 色碼。大寫與小寫字母皆可接受，並在輸出中統一規範為小寫。
- 在三角形實際擺放的近似尺寸與背景上檢視即時預覽。預覽使用與複製後 CSS 中相同的 longhand 邊框宣告，所以所見即所得。
- 分別使用兩個剪貼簿按鈕來複製 CSS 與 HTML。每個按鈕各自要求剪貼簿權限，並回報一則指明已複製格式的成功訊息。若瀏覽器拒絕剪貼簿存取，兩個程式碼區塊仍會保持可見，以便手動選取。
- 判斷 aria-hidden 是否適合目標位置。預設程式碼片段使用 aria-hidden="true"，因為三角形是裝飾性質的。若該形狀用於傳達意義或作為控制項，不要只依賴該屬性 — 請在周圍的語意元素中加入可見文字或無障礙標籤。
- 若預設類別會與現有樣式表衝突，請重新命名，並同步更新 CSS 與 HTML 輸出中的對應名稱。
四個方向的尺寸如何對應邊框
上下限規則的行為會因三角形是垂直或水平而有所不同。下表摘要列出哪些邊框為彩色、哪些為透明，以及哪個尺寸會被拆分。
| 方向 | 彩色邊框 | 透明邊框 | 底邊尺寸(拆分) | 指向邊尺寸(完整) |
|---|---|---|---|---|
| 上 | 下 | 左、右 | 所選寬度 | 所選高度 |
| 下 | 上 | 左、右 | 所選寬度 | 所選高度 |
| 左 | 右 | 上、下 | 所選高度 | 所選寬度 |
| 右 | 左 | 上、下 | 所選高度 | 所選寬度 |
底邊永遠會使用上下限拆分到兩個透明邊框。指向邊永遠是設為完整所選尺寸的單一彩色邊框。對垂直三角形而言，透明的左與右邊框相加等於所選寬度。對水平三角形而言，透明的上與下邊框相加等於所選高度。
若需要更深入了解上、下、左、右四種情況的逐步說明，四方向 CSS 三角形邊框食譜 會逐行列出每個邊框宣告。若想在產生之前挑選合理的寬度與高度值，寬度與高度指南 會為每個方向對應能產生可辨識形狀的輸入。
對照目標位置檢查即時預覽
即時預覽確認的是邊框幾何，而非你將三角形放入的元件之完整佈局、主題或無障礙行為。請透過瀏覽器開發者工具量測渲染元素來驗證繪製尺寸:內容框應為 0 乘 0，而繪製區域應符合底邊加上指向邊的尺寸。若數字對不上，請檢查是否有其他 CSS 規則覆寫了邊框寬度或顏色。
光柵化仍會因縮放與裝置像素比而異，所以請在 200% 縮放、強制色彩設定，以及常見的手機寬度下進行測試。與文字並排使用的三角形也應對淺色與深色主題分別檢查，而不是預設它會繼承足夠的對比 — 色彩對比檢查器 可確認你所選的 HEX 在周圍背景上符合 WCAG 閾值。繪製出的 HEX 預設為不透明，因此若周圍元件支援主題切換，請為兩種主題都做規劃。
若目標技術堆疊使用設計權杖，可在複製後將字面 HEX 替換為 CSS 變數、漸層或 currentColor 關鍵字。產生器並不直接輸出這些語法，因為它專注於實心邊框三角形，但透明側邊框必須保持透明 — 將透明邊框切換為彩色值，會使三角形塌縮回矩形。
何時邊框三角形不是合適的形狀
邊框三角形體積小、速度快且可預測，但它並非萬能。它無法直接產生圓角尖端、弧形邊緣、空心外框、漸層填色、陰影或任意多邊形 — 每一種形狀都需要 SVG 或由曲線構成的 clip-path，而產生器並不會嘗試去模擬這些形狀。邊框三角形的內容框實測為零，這使得佈局、變換、點擊測試、外框、溢位與對齊的處理，都不如使用具有明確 viewBox 的 SVG 那麼直觀。
對於單一裝飾性的箭頭或分隔線，邊框方式是合適的選擇。對於承載狀態的指示器、導覽控制項，或任何需要多於單一筆直邊緣的形狀，請改用 SVG 或 clip-path，並在目標環境中測試瀏覽器支援。產生器不會假裝能產出這些形狀，而勉強將其輸出扭向這些用途，通常耗費的時間會比一開始就選對技術還多。