CSS 邊框三角形是由一個 0px x 0px 的元素建構而成，該元素的三或四條實心邊框在 45 度接縫處被裁切，形成一個單一的實心楔形。這個技巧仰賴瀏覽器將每條邊框各自算成一個梯形、並在角落處以斜接方式接合的事實，因此當內容框沒有尺寸時，四個梯形會在單一一點交會，形狀就會塌縮成一個三角形。兩條相對的邊框被設為透明，作為斜邊使用，而其中一條邊框保留顏色，形成指向的頂點。這項技巧不需要 SVG、不需要 canvas、不需要圖片檔，也不需要偽元素函式庫，只需要一個宣告了邊框寬度、樣式與顏色的 div。這是在版面配置、工具提示箭頭或分隔線中放入小型方向指示器最具可攜性的方式，而同樣的概念可以延伸到全部四個基本方向，只需移動有顏色的那條邊框即可。
四條邊框如何變成三角形
當寬度與高度都降到 0 時，元素的內容框會塌縮，但邊框依然存在。方框的每一邊都會被繪製成填滿該邊框宣告寬度的楔形，而相鄰的邊框會以對角線交會。當四條邊框顏色相同時，結果會是一個四角的形狀；若其中三條邊框透明、一條有顏色，就只有連接到有色邊框的那個楔形會顯示出來，而顯示出的形狀就是一個三角形，其底邊橫跨兩條垂直邊框，頂點則指向遠離有色邊的方向。
對於垂直三角形（向上或向下），兩條透明的側邊邊框加總起來就是底邊寬度，而有色邊框則等於可見高度。對於水平三角形（向左或向右），透明的上下邊框加總起來就是底邊高度，而有色邊框等於可見寬度。產生器會明確寫出每一條完整格式的邊框宣告，讓幾何結構在 CSS 輸出中維持可見、可稽核，而不是塌縮成單一簡寫、掩蓋了哪一邊有顏色。
| 方向 | 有色邊框 | 透明邊框 | 有色寬度等於 | 透明配對等於 |
|---|---|---|---|---|
| 向上 | border-bottom | border-left、border-right | 所選高度 | 所選寬度 |
| 向下 | border-top | border-left、border-right | 所選高度 | 所選寬度 |
| 向左 | border-right | border-top、border-bottom | 所選寬度 | 所選高度 |
| 向右 | border-left | border-top、border-bottom | 所選寬度 | 所選高度 |
45 度接縫也解釋了為什麼每條邊框都要設為 solid。虛線或點線邊框無法乾淨地斜接成三角形，因為那些虛線是在楔形繪製完成後才套用上去的，結果會得到條紋，而不是單一的實心形狀。
在瀏覽器中建立 CSS 邊框三角形
從空白樣式表到可用 CSS 與 HTML 最快的途徑，就是 CSS 三角形產生器，它會在你調整設定時，讓即時預覽與輸出結果保持同步。
- 選擇三角形方向。 選擇向上、向下、向左或向右。這個選擇決定了哪一條邊框會成為有色的指向邊，哪兩條邊框則維持透明。
- 輸入可見的寬度與高度。 系統接受 10 到 300 像素之間的整數值。這些是繪製出來的尺寸，而不是內容框的大小，內容框始終維持在 0 x 0。
- 輸入六位數的 HEX 顏色。 格式必須是井字號後面跟著剛好六個十六進位數字，例如 #1f6feb。輸出時該數值會被正規化為小寫。
- 以實際使用時的尺寸與背景檢視即時結果。 預覽使用的是與 CSS 輸出中相同的推導邊框宣告，因此你看到的就是你複製到的內容。
- 分別複製 CSS 與 HTML。 每個按鈕都會向瀏覽器請求剪貼簿存取權限。若剪貼簿存取被拒絕，兩個程式碼區塊都會保持可見，你可以手動選取；此頁面不會謊報成功。
- 決定無障礙處理方式。 產生出來的 HTML 包含一個帶有 aria-hidden="true" 的 div，這對裝飾性箭頭來說是正確的做法。如果三角形要傳達方向、狀態、驗證結果或導覽資訊，就要把這段沉默的程式碼片段換成可見文字，或在周圍的控制項上加上無障礙標籤。
- 視需要重新命名 class。 預設的 class 是 lizely-triangle。如果這個名稱與現有樣式表衝突，請在產生器輸出中變更它，並同步更新 CSS 規則與 HTML 的 class 屬性。
產生器強制執行的方向、尺寸與顏色規則
產生器刻意設計得很嚴格。瀏覽器端的控制項會限制一般輸入，而底層程式碼則會獨立拒絕不支援的方向、格式錯誤的顏色、小數，以及超出文件所述範圍的數值。它不會悄悄地將無效的程式化輸入夾緊到範圍內，也不會輸出不完整的程式碼。
對於偶數尺寸，兩條透明邊框會平均分割底邊。對於奇數尺寸，產生器會使用向下取整與向上取整的數值，讓總和維持精確。舉例來說，一個 41px 的底邊會被分割成一條透明邊框 20px、另一條透明邊框 21px。這背後的原因是機械性的：Chromium 可能會把兩條 20.5px 的邊框量化到各為 20px，這樣就會把原本要求的 41px 總和縮小成 40px，並悄悄遺失一像素的繪製幾何結構。這一像素的不對稱設計是為了保留原本要求的總和。
以產生器內部實際執行的算式寫出來，41 除以 2 等於 20 餘 1，所以向下取整值是 20，向上取整值是 21。兩者相加為 41：20 + 21 = 41。
顏色規則同樣嚴格。輸入值必須符合井字號後面跟著剛好六個十六進位數字的格式。三位數簡寫如 #fff、帶透明度的八位數十六進位如 #1f6febff、CSS 具名顏色如 tomato，以及 CSS 變數如 var(--accent)，全部都會被拒絕。系統不會產生透明度通道、漸層、currentColor，或廣色域語法。複製之後，你可以把字面值換成受信任的設計權杖，但要先確認目標語法在使用環境中受支援，且透明的側邊邊框依然維持透明。
邊框三角形的侷限之處
邊框技巧精簡又具可攜性，但它不是通用的繪圖工具。因為可量測的內容框是 0 x 0，而繪製出來的形狀是邊框產生的附帶效果，有幾件在 SVG 中看似理所當然的事，用邊框做起來會很彆扭，甚至不可能：
- 沒有圓角頂點。 邊框的角是以 45 度斜接的，無法軟化成曲線。
- 沒有空心形狀或描邊。 可見的區域是實心填色；你無法為三角形畫外框，也無法在裡面挖洞。
- 沒有漸層。 邊框只接受單一實色。若要漸層填色，需要用 SVG、clip-path，或分層的做法。
- 沒有複雜多邊形。 只能產生四個基本方向的三角形。非直角三角形、頂點朝對角線方向的等腰三角形，或星形，都無法單靠邊框畫出來。
- 沒有陰影或濾鏡。 在零尺寸元素上套用繪製邊框的 box-shadow，會產生意料之外的幾何結果，若視覺效果很重要，SVG 或濾鏡管線是更好的選擇。
遇到上述任何情況，請改用 SVG 或 clip-path，並在目標環境中確認瀏覽器支援度。MDN 的 CSS 背景與邊框指南記載了底層的 邊框屬性與透明色行為，而 W3C CSS Backgrounds and Borders Level 3 規範則定義了產生器所使用的完整格式邊框寬度、樣式與顏色。
讓三角形具備無障礙性並支援主題切換
產出的 HTML 是一個帶有 aria-hidden="true" 的 div，這對於不向輔助技術傳達任何資訊的裝飾性箭頭或分隔線來說是恰當的。一旦三角形帶有意義，例如排序方向指示器、驗證狀態、手風琴的展開箭頭，或「下一步」控制項，這段沉默的程式碼片段本身就不再正確了。請在周圍的按鈕或錨點內加入可見文字，為該控制項提供無障礙名稱，並讓裝飾性三角形持續對輔助技術隱藏。
| 三角形角色 | 產生的 HTML | 正式環境中應額外加上什麼 |
|---|---|---|
| 裝飾性箭頭或分隔線 | 帶有 aria-hidden="true" 的 div | 不需額外處理；直接照原樣使用 |
| 狀態指示器（排序、驗證） | 帶有 aria-hidden="true" 的 div | 在周圍控制項上加上可見文字或 aria-label |
| 互動式控制項（展開箭頭、下一步） | 帶有 aria-hidden="true" 的 div | 使用具備無障礙名稱的按鈕或錨點；三角形本身維持裝飾性 |
顏色選擇也值得自行檢查。這個 HEX 值會被繪製成不透明邊框，而緊鄰文字或圖示的三角形，需要同時對背景與所接觸的文字維持足夠對比。淺色主題與深色主題可能會讓這種對比關係反轉。色彩對比檢查工具這類工具能讓你在上線前確認 WCAG 對比值，這一點尤其重要，因為透明邊框無法調整對比度──它們就是完全看不見的像素。
如果你在複製後把 HEX 字面值換成 CSS 變數，請確認該變數在使用端的樣式表中會解析為一個不透明的六位數顏色。透明的側邊邊框必須維持透明，因此不要在這些宣告上套用會帶入透明度或具名顏色的主題權杖。
上線前先測試最終的三角形
預覽確認的是三角形本身的邊框幾何結構，而不是目的地元件的版面配置或無障礙行為。在把這段程式碼片段視為可上線之前，請先把它放進實際元件中檢查：
- 200% 縮放時的表現。 像素精準的邊框在縮放時可能會偏移；請確認繪製出的形狀仍然看起來像三角形。
- 高對比與強制配色模式。 在部分平台上，強制配色模式會用系統顏色繪製邊框；此時三角形仍應保持可見。
- 常見的行動裝置寬度。 一個 100px x 100px 的三角形，在 320px 螢幕上與在 1440px 螢幕上的視覺份量是不同的。
- 互動狀態。 當三角形存在時，周圍控制項的 hover、focus 與 active 狀態看起來仍應是刻意設計的。
- 大量使用時的效能。 單一個裝飾性三角形的影響可忽略不計，但清單中若有數百個，就可能增加可觀的 DOM 與繪製負擔；比起重複的隱藏控制項，更建議使用一個語意化控制項搭配裝飾性形狀。
邊框三角形並非通用標準。確切的尺寸限制與方向序列化規則，刻意屬於由四方向、奇數尺寸、精確輸出與邊界測試所涵蓋的在地產品規則，並不是在宣稱所有 CSS 三角形都必須這樣寫。請把產生器輸出視為一個已知可行的起點，並在自己的元件中上線前重新驗證以上規則。
延伸閱讀：隨機顏色產生器：16.7M 種顏色，免註冊。
延伸閱讀：產生 CSS 核取方塊後，如何檢查結果。