CSS 三角形產生器讓你從四個方向中擇一 — 上、下、左、右 — 工具會把彩色邊框指派到你希望三角形朝向的那一邊。先選方向，其餘的幾何尺寸就會自然到位:彩色邊框佔滿整個指向的尺寸，兩條垂直邊框保持透明以形成斜邊，而可見的底邊等於那兩條透明邊的總和。由於每個方向都只是「一條彩色邊框加兩條透明邊框」的不同組合，你所做的其實是選擇要為這個看不見的零乘零元素的哪一邊上色。光是這個選擇就決定了整個形狀，因此在設定寬度和高度之前先確定方向，可以省去重複重建程式碼片段的麻煩。這四個選項涵蓋了所有需要邊框三角形的常見 UI 場景，從向下指向的下拉選單插入號到向上指向的工具提示箭頭，而且每個方向都會對應到產生的 CSS 中特定的邊框，讓預覽與程式碼逐行一致。
方向在邊框三角形技巧中如何運作
CSS 三角形產生器使用的是經典的零尺寸邊框技巧。被設定樣式的元素其內容寬度與內容高度都設為零，因此框本身不會繪製任何東西。反之，四條邊框會從那個中心點向外繪製，並在直角處相交。如果其中三條邊框是透明的、一條是彩色的，則只會看到彩色的那一條，但它所切出的斜邊是由透明邊框與它相交的夾角所定義。
方向是唯一會決定四條邊框中哪一條上色的決策:
- 向上 — 底部邊框為彩色，左右邊框為透明。三角形以平底為基，向上指。
- 向下 — 頂部邊框為彩色，左右邊框為透明。三角形以尖端為基，向下指。
- 向左 — 右側邊框為彩色，上下邊框為透明。三角形以右邊為基，向左指。
- 向右 — 左側邊框為彩色，上下邊框為透明。三角形以左邊為基，向右指。
展開式的邊框屬性會在 CSS 中逐一寫出，讓幾何設定在原始碼中一目了然，而不是被簡寫給藏起來。有了這四種組合，工具的所有方向詞彙就已涵蓋。對角線、直角、中空、圓角、外框等三角形並不在範圍內，產生器也不會去假裝能做這些 — 它根本沒有提供那些選項。
依據三角形用途來決定方向
選擇方向很少是抽象的決定。你通常會先有一個需要三角形的 UI 模式，而該模式本身就決定了方向。從那裡反推，就能讓選擇變得簡單。
| UI 模式 | 方向 | 原因 |
|---|---|---|
| 彈出視窗上方的工具提示箭頭 | 向上 | 箭頭向上指入工具提示，遠離觸發元素 |
| 彈出視窗下方的工具提示箭頭 | 向下 | 箭頭從上方往下指向觸發元素 |
| 彈出視窗左側的工具提示箭頭 | 向左 | 箭頭從右側向左指入彈出視窗 |
| 彈出視窗右側的工具提示箭頭 | 向右 | 箭頭從左側向右指入彈出視窗 |
| 下拉選單插入號 | 向下 | 表示選單會在控制項下方展開 |
| 收合狀態的手風琴箭頭 | 向右 | 表示內容會向右滑出 |
| 展開狀態的手風琴箭頭 | 向下 | 表示內容已在標題下方開啟 |
| 指向說話者的對話氣泡尾端 | 朝向說話者的方向 | 三角形的平邊貼在氣泡上，尖端接觸說話者 |
| 角落的通知標記 | 自容器向外指的方向 | 讀起來像是自標籤向外指出的標記或警示 |
想了解這四個方向在 CSS 中如何撰寫的完整說明，請參考 CSS 三角形產生器的四方向教學。
在 CSS 三角形產生器中選擇方向
一旦知道三角形必須指向哪個方向，產生器就會依控制項出現的順序引導你完成其餘步驟。
- 開啟 CSS 三角形產生器，並決定在你的版面配置中三角形需要朝向哪個方向。
- 從四個選項(上、下、左、右)中選擇對應的方向。這會決定產生的 CSS 中哪一條邊框為彩色。
- 以介於 10 到 300 之間的整數像素輸入可見的寬度和高度。工具會自動把這些值指派給對應的展開式邊框。
- 以 #rrggbb 格式輸入一個六位數的十六進位色碼。產生器會將字母標準化為小寫，且拒絕任何不是井字號後接六位十六進位數字的輸入。
- 在同一頁面上觀察即時預覽的更新，並將它與三角形將放置位置的近似背景顏色比對。
- 點擊複製 CSS，再點擊複製 HTML。兩次剪貼簿操作是分開的，狀態列會顯示剛才複製的是哪一種格式。如果瀏覽器封鎖剪貼簿存取，兩個程式碼區塊仍會保持可見，以便手動選取。
- 如果產生的 .lizely-triangle 類別會與現有樣式表衝突，請予以重新命名，並同步更新 CSS 與 HTML 以保持一致。
方向在預覽與複製的程式碼之間不會改變。畫面上為彩色的那條邊框，在你的樣式表中也會是同一條。
方向如何與寬度和高度互動
方向與尺寸是連動的，因此你在方向選單中所做的選擇會改變寬度和高度的解讀方式。
| 方向群組 | 寬度控制的是 | 高度控制的是 | 彩色邊框等於 |
|---|---|---|---|
| 上 / 下(垂直) | 兩條透明側邊框的總和 | 頂部或底部的彩色邊框 | 所選的高度 |
| 左 / 右(水平) | 左側或右側的彩色邊框 | 兩條透明上下邊框的總和 | 所選的寬度 |
對於垂直三角形，可見的底邊就是所繪製的寬度，而所繪製的高度就是彩色邊框本身。對於水平三角形，角色互換:所繪製的寬度是側邊的彩色邊框，可見的高度則是兩條透明上下邊框的總和。
當相關尺寸為偶數時，產生器會將它平均分配給兩條透明邊框 — 一個 60 乘 40 的向上三角形會在每條透明側邊使用 30px，並使用 40px 的彩色底邊。當尺寸為奇數時，工具會改用無條件捨去與無條件進位的值，而非兩半均分，因此 41px 的底邊會變成一側 20px、另一側 21px。Chromium 可能會將兩條 20.5px 的邊框量化為各 20px，這會無聲地損失一個繪製寬度的像素。不對稱的分配方式能保持所要求的總和精準無誤。
MDN 的 CSS 背景與邊框 指南記載了此技巧所依賴的透明邊框行為，而 CSS 背景與邊框規格 則定義了產生器所輸出的展開式邊框寬度、樣式與顏色。
無障礙性與裝飾性方向選擇
產生器所產生的 HTML 片段會將三角形包在一個帶有 aria-hidden="true" 的 div 中。對於像工具提示尾端、下拉選單插入號或與描述相同狀態的可見文字並列的箭頭這類裝飾性形狀，這是正確的預設處理方式。螢幕閱讀器會略過它，因為它除了周圍標籤已傳達的內容外，並沒有提供額外資訊。
如果三角形是使用者唯一的線索 — 舉例來說，播放圖示、驗證標記、必填欄位標籤，或沒有可見標籤的方向性控制項 — 那麼 aria-hidden="true" 就是錯誤的選擇。在這種情況下，三角形不再是裝飾性的，而是在傳達狀態，將它從無障礙樹中移除會破壞輔助技術的使用體驗。請為周圍的互動控制項加入可見文字或可存取標籤，並讓三角形維持裝飾性質。
方向也會影響主題對比。在淺色背景上看起來清晰的三角形，可能會在深色背景上消失。複製片段後，如果設計系統中已有設計權杖，請以該權杖取代寫死的十六進位色碼，但請確認新語法有受到支援，以及兩條透明的側邊框仍保持透明。在正式上線前，請以 200% 縮放、開啟高對比、強制色彩模式，以及常見的手機寬度來測試最終元件。
當邊框三角形不適合該任務時
邊框技巧是繪製平坦、實心、直邊三角形的快速方法，而四個方向已涵蓋大多數 UI 需求。它並非通用的多邊形工具。繪製出的形狀是固定不變的:無法將尖端圓滑化、彎曲邊緣、鏤空中心、加上外框、使用漸層填色，也無法繪製任何其他多邊形形狀。若需要上述任一效果，請改用具有明確 viewBox 的 SVG，或使用 clip-path 屬性，並在你的目標環境中確認瀏覽器支援度。
邊框三角形在執行階段的行為也與一般方框不同。元素的可測量內容框為零，因此版面配置、變形、點擊測試、外框、溢出與對齊方式，相較於 SVG 元素都可能出現違反直覺的行為。單一三角形的效能成本可忽略不計，但在單一檢視中堆疊數百個裝飾性三角形仍會增加 DOM 與繪製負擔，因此請優先使用單一語意化控制項搭配裝飾性形狀，而不是重複的隱藏控制項。
方向的決策是工作流程中最單純的部分，因為只有四個選擇，每個都只對應到一條彩色邊框。依據你的設計需求選擇方向，確認預覽與目標背景相符，複製兩個程式碼區塊，只有在會與既有項目衝突時才重新命名類別。