CSS 邊框三角形是一個大小為零的元素，其三個粗邊框以角度相交，形成實心箭頭。三角形的每一邊都是邊框：兩個透明邊框構成斜邊，一個彩色邊框則指向選定方向，這就是為什麼即使元素本身沒有寬度或高度，仍能形成可見形狀。這項技巧出了名地脆弱——寬度只要有一個像素、RGB 值、奇怪的基礎尺寸，或設定錯誤的彩色邊框，都可能將三角形壓平、指向錯誤方向，或在特定縮放比例下無聲地縮小一個像素。這些錯誤大多源自同一個原因：開發者手動輸入 CSS，而不是產生同步的 CSS 與 HTML。專為此設計的 CSS 三角形產生器將輸入限制為 10 到 300 像素之間的整數，以及嚴格的六位數 HEX 色彩，並將完全相同的邊框宣告同步到即時預覽和對應的程式碼區塊中，讓你看到的幾何形狀就是所貼上的幾何形狀。這層限制將脆弱的一行技巧轉化為可複製、可逐行稽核的方案。
零大小技巧及其容易失效的原因
最常見的單一錯誤，是把 CSS 三角形當成一般形狀。這個元素並非以一般意義具有寬度或高度；內容的兩個尺寸都明確設為零，整個繪製區域都來自邊框。當開發者寫下 width: 80px; height: 80px;，「讓三角形具有正確大小」時，形狀會在 80 像素方框中央塌縮成一個微小的彩色點，因為邊框已無法延伸至完整的對角線。三角形的可見大小完全取決於邊框粗細，而不是元素方框。
第二個常見的新手錯誤，是忘記將兩個不指向的邊框設為透明。若未這樣做，四個角都會套用彩色邊框，結果便會形成四個在方框中相交的梯形——或者，視乎哪個邊框帶有顏色，形狀甚至完全不像三角形。手寫的 CSS 往往使用 border: 50px solid #ff8800 這類簡寫，然後透過覆寫其中一側來「修正」，導致其他邊仍保有顏色。產生器會明確寫出每一個完整形式的邊框宣告，因此輸出內容中的幾何形狀清楚可見，也方便稽核。
五步產生三角形
- 從可用選項中選擇三角形方向——向上、向下、向左或向右。
- 將可見寬度和高度設為 10 到 300 像素之間的整數；不要輸入小數。
- 選擇六位數的 HEX 色彩，例如 #3366ff；此工具不會產生具名色彩、RGB、HSL、alpha 或 CSS 變數。
- 按照三角形實際顯示時的大致大小和背景檢查即時預覽；預覽使用與輸出內容相同的衍生邊框宣告。
- 分別點擊 Copy CSS 和 Copy HTML；如果 lizely-triangle 類別可能與現有樣式表衝突，請將其重新命名，並同步更新兩個程式碼區塊。
會在不知不覺間破壞形狀的色彩與方向錯誤
常見錯誤之一，是假設彩色邊框永遠是底部邊框，或複製了為某個方向撰寫的程式碼片段，卻忘記切換彩色側。方向對應關係是固定的，手動設定時很容易弄錯。
| 方向 | 彩色邊框 | 透明邊框 | 繪製的底部 |
|---|---|---|---|
| 向上 | 底部 | 左側、右側 | 選取的高度 |
| 向下 | 頂部 | 左側、右側 | 選取的高度 |
| 向左 | 右側 | 頂部、底部 | 選取的寬度 |
| 向右 | 左側 | 頂部、底部 | 選取的寬度 |
對於垂直三角形（向上或向下），兩個透明側邊框的總和等於選取的寬度，而彩色邊框等於選取的高度。對於水平三角形（向左或向右），透明頂部與底部邊框的總和等於選取的高度，而彩色邊框等於選取的寬度。偶數尺寸可以整齊分割；奇數尺寸則無法，下一節將說明這一點。
色彩格式錯誤同樣會造成嚴重問題。產生器要求井字號後面必須有 exactly 六個十六進位數字，並會將值標準化為小寫。#FF8800、#ff8800 和 f80 看起來都正確，但只有六位數格式能通過驗證器；工具會拒絕不支援的格式，而不會在無聲情況下強制限制。RGB、HSL、alpha 色道、漸層、currentColor 和廣色域語法都不在工具支援範圍內；如果需要其中任何一項，請在複製後以可信賴的設計權杖取代該常值，並確認透明側邊框仍維持透明。
尺寸、像素損失與類別名稱的陷阱
最隱蔽的錯誤，是讓瀏覽器的像素量化從底部吃掉一個像素。Chromium 可能將兩個 20.5 像素的邊框各自量化為 20 像素，因此要求的 41 像素底部會在無聲情況下呈現為 40 像素。手寫的程式碼片段很少察覺這點；差異只會在特定縮放比例或裝置像素比下顯現。產生器會將垂直於底部的兩側拆成下取整與上取整值，以處理奇數總和；例如 41px 底部會拆成 20px 和 21px，藉此保留要求的繪製尺寸。
寬 41px、向上的三角形計算範例：
- 選取的寬度：41，選取的高度：41，方向：向上。
- 透明左側邊框：20px，透明右側邊框：21px（41 的下取整 + 上取整）。
- 彩色底部邊框：41px solid #3366ff。
- 形成的繪製底部：20 + 21 = 41 像素，與要求的寬度相符。
範圍和格式錯誤也呈現出類似模式。寬度和高度只接受 10 到 300 像素（含）之間的整數；瀏覽器控制項會阻止輸入任何其他值，而底層產生器也會獨立拒絕格式錯誤的輸入，不會悄悄產生不完整的程式碼。像 41.5px 這樣的小數、負數及超出範圍的值都會遭拒。如果需要超出該範圍的三角形，此工具並不適合用來建立它。
類別名稱會造成最後一類常見的複製貼上錯誤。產生器將類別命名為 lizely-triangle。如果樣式表中已有同名類別並套用不同規則，三角形便會使用錯誤的邊框宣告呈現，或繼承相互衝突的完整形式覆寫設定。修正方式很直接：同步在 CSS 和 HTML 程式碼區塊中重新命名類別，然後確認新名稱不會與任何其他選擇器衝突。
無障礙、剪貼簿，以及預覽不會驗證的項目
HTML 輸出包含一個帶有產生類別和 aria-hidden="true" 的 div。對於不向螢幕閱讀器傳達資訊的裝飾性箭頭或分隔符，這項設定正確。對於用來傳達狀態、方向、驗證回饋、導覽或其他意義的三角形，則不正確。在這些情況下，請在周圍的互動控制項中加入可見文字或無障礙標籤，並讓裝飾性三角形對輔助科技保持隱藏。產生器無法偵測元件的語意角色，因此這項決定必須由你作出。
Copy CSS 和 Copy HTML 會分別要求剪貼簿權限。如果瀏覽器拒絕剪貼簿存取，兩個程式碼區塊仍會顯示，可供手動選取，而頁面也不會錯誤回報複製成功。請勿以為點擊 Copy 就等於已貼入檔案——務必確認剪貼簿包含你預期的格式。
即時預覽可確認邊框幾何形狀，但不會確認目的元件中的版面配置、對齊、點擊測試或對比。斜邊的點陣化結果會隨縮放比例和裝置像素比而異，而彩色邊框完全不透明，因此，放在文字旁邊的三角形應在淺色和深色主題中分別檢查，而不應假定它會自動繼承足夠的對比。請在使用者實際採用的螢幕寬度下，以 200% 縮放比例、啟用高對比並開啟強制色彩來確認最終結果。
何時不應選擇 CSS 三角形
邊框三角形很精簡，但有其限制。可測量的內容方框為零，繪製的邊框卻會占據空間，因此版面配置、轉換、點擊測試、外框、溢位和對齊，可能不如具有明確 viewBox 的 SVG 直觀。邊框三角形無法直接建立圓潤尖端、弧形邊緣、鏤空形狀、漸層填色、筆觸、複雜陰影或任意多邊形。若有這類需求，請使用 SVG 或 clip-path，並在預定環境中測試瀏覽器支援。
單一三角形的效能通常不成問題，但數百個裝飾元素可能明顯增加 DOM 和繪製工作。與其複製多個隱藏控制項，不如優先採用具有裝飾形狀的單一語意控制項；此工具也僅保留給四個支援的方向——本工具不會產生對角三角形。如果需要對角三角形，MDN 的 CSS 背景與邊框指南說明相關邊框屬性，而CSS 背景與邊框規格則定義產生器所採用的完整形式邊框寬度、樣式與色彩。
如需深入瞭解，請參閱網頁設計的 RGB 轉 HEX：轉換 CSS 色彩。
如需深入瞭解，請參閱產生 CSS 立方貝茲曲線後修正錯誤結果。