當你需要一個小型、實心、邊緣筆直的指標，而且不需要圓角、漸層或中空形狀，同時這個形狀對輔助科技不帶任何資訊時，使用 CSS 邊框三角形就是正確的選擇。這項技巧會繪製一個內容寬度與內容高度皆為零的元素，接著利用三條邊框——兩條透明、一條有顏色——來畫出可見的形狀。這種幾何結構渲染快速、無相依套件，而且容易複製到任何樣式表中，這正是許多 UI 模式會採用它的原因。

你真正在做的決定不是「我該不該畫一個三角形?」而是「用邊框畫三角形是不是這個特定工作最誠實的工具?」有些需求與這項技巧完美契合:指向工具提示的箭頭、裝飾選單的雪佛龍圖示、卡片下方的小型裝飾。其他需求表面上看起來像三角形，卻會破壞這項技巧:圓角尖端、外框形狀、中空框架、漸層填色，或是任何必須向螢幕閱讀器傳達意義的三角形。CSS 三角形產生器是圍繞著四方向、實心單色、純裝飾的情境所打造——這正是邊框技巧勝過所有替代方案的甜蜜點。

how do i decide whether i need to generate css triangle
你該用 CSS 三角形嗎?一份決策檢查清單

邊框三角形實際上是什麼(又不是什麼)

CSS 三角形產生器只產生一種東西:一個實心、邊緣筆直的三角形，其填色區域完全來自零大小元素上的邊框。選擇一個方向——上、下、左或右——產生器就會把整個指向的尺寸指派給一條有顏色的邊框，而兩側的邊框則變成透明，加總起來作為底邊。例如，一個向上的三角形會使用透明的左邊框與右邊框，加上有顏色的底邊邊框。一個指向右側的三角形則使用有顏色的左邊框，搭配透明的頂部與底部邊框。元素本身在版面配置上回報的寬度與高度皆為零。

它「不是」什麼同樣重要。邊框三角形無法直接產生圓角尖端、弧形邊緣、中空形狀、漸層填色、筆觸，或是任何超出單一由兩條直角邊構成的多邊形。它不會使用帶有透明度的顏色、CSS 變數、漸層或 currentColor。所填上的 HEX 為不透明色。如果你的設計需要上述任何一項特性，那你找錯技巧了，你應該一開始就規劃使用 SVG 或 clip-path。

CSS 三角形產生器中的實作會明確寫出每一條邊框的 longhand 屬性——border-top、border-right、border-bottom、border-left——如此一來，當你閱讀輸出時，幾何結構仍可被審查。這個決定是刻意的:longhand 能清楚看出哪一條邊框帶有顏色、哪幾條保持透明，而不是像 border: 1px solid 這樣的 shorthand 把技巧藏起來。

什麼時候 CSS 三角形是合適的選擇

在產生邊框之前，請把下表當作你的工作螢幕。如果你的工作落在左欄，CSS 三角形產生器就是最便宜且正確的解法。如果落在右欄，則請在開始前先換工具。

使用邊框三角形改用 SVG 或 clip-path
大小介於 10 到 300 像素之間、實心、向上下左右任一方向的箭頭斜向方向或任意多邊形角落
不傳達任何意義的裝飾性工具提示指標用來傳達狀態、方向或驗證結果的三角形
帶有一個實心 HEX 顏色的小型雪佛龍、分隔線或裝飾圓角尖端、弧形邊緣或中空外框
能在舊瀏覽器上運作、無相依套件的標記漸層填色、陰影或筆觸
顏色由你可控制的字面十六進位碼指定顏色來自 currentColor、CSS 變數或帶透明度的色碼

邊框三角形在與互動控制項並列時也仍然便宜。這項技巧會繪製在元素的邊框框中，而不是內容框中，這代表繪製出來的形狀可以延伸到版面配置原本保留給 padding 的區域。在你假設周圍間距不受影響之前，請先以視覺方式確認。

如果你的專案主題設計期望三角形能繼承自 CSS 變數，或能在深色模式下切換，請把這視為一個訊號，去閱讀位於 /color/guides/how-to-choose-color-when-using-a-css-triangle-generator/ 的色彩決策指南，因為產生器只會輸出一個字面十六進位碼，不會產生變數引用。

什麼時候你該改用 SVG 或 Clip-Path

把你推出邊框三角形甜蜜點的時刻，通常與視覺有關，而非技術。例如圓角尖端就是最典型的情況:沒有任何邊框屬性能把兩條透明邊框的交會處修圓，所以「柔邊箭頭」無法來自一個零大小的元素。中空或有筆觸的三角形也會落入同樣的陷阱——邊框要不是完全填色，就是完全透明，沒有中間地帶。漸層填色、廣色域色彩，或是帶有透明度的顏色，同樣落在這項技巧之外，因為有顏色的邊框是以不透明方式繪製。

SVG 與 clip-path 能以明確的幾何結構解決這些情況。SVG 提供真正的 viewBox、真正的曲線，以及你可以填色或描邊的路徑。Clip-path polygon() 則讓你保持單一元素的標記，擁有任意角度，而不需要任何圖片檔。這兩種做法在無障礙方面與邊框三角形處理方式不同:當形狀具有意義時，它們可以帶有真正的 <title> 或 aria-label。

排版與點擊測試是切換的第二個原因。邊框三角形的可測量內容框為零，因此變形、外框、溢位與對齊的表現，可能會比具有明確邊界框的 SVG 圖示更不直觀。如果你需要與周圍文字進行像素級精準的對齊，請在 200% 縮放、高 DPI 螢幕，以及強制色彩模式下測試最終形狀後再做決定。MDN 的背景與邊框指南記載了這項技巧所依賴的 longhand 邊框屬性，而 W3C CSS Backgrounds and Borders Level 3 規範則明確定義了透明邊框與有顏色邊框是如何結合的。

使用 CSS 三角形產生器來產生三角形

開啟 CSS 三角形產生器，並依照下列步驟進行。

  1. 從上、下、左、右中選擇一個方向。方向決定了哪一條邊框帶有顏色，以及哪兩條邊框保持透明。
  2. 輸入介於 10 到 300 像素之間的整數寬度與高度。產生器會把你的寬度與高度當作三角形的可見繪製尺寸，而不是元素的內容框。
  3. 以 #RRGGBB 格式輸入一個六位數的 HEX 顏色。輸入內容會被正規化為小寫，所以你可以貼上大寫，輸出仍會保持一致。
  4. 在與三角形實際擺放位置相近的背景上檢查即時預覽。預覽使用的是產生器複製的相同邊框宣告，所以你所見即所上線。
  5. 閱讀同步的 CSS 與 HTML 區塊。CSS 明確設定每一條邊框屬性的 longhand;HTML 則包含一個帶有產生類別以及 aria-hidden="true" 的單一 div。
  6. 複製 CSS 與複製 HTML 會分別請求剪貼簿權限。如果瀏覽器拒絕剪貼簿存取，兩個程式碼區塊會留在頁面上供手動選取，並且不會出現錯誤的成功訊息。
  7. 決定 aria-hidden 是否適合目的位置。這段程式碼適合用於裝飾性箭頭或分隔線。如果三角形用來傳達狀態、驗證結果、導航，或任何其他意義，請改為在周圍的互動控制項上加上可存取的文字或標示，而不是依賴這個靜默的程式碼片段。
  8. 如果產生的類別名稱 lizely-triangle 會與現有的樣式表衝突，請同時在 CSS 與 HTML 區塊中重新命名，讓兩者的輸出保持同步。

產生器對奇數尺寸採用精準輸出規則。如果你要求 41 像素的底邊，它會把這個底邊拆成一個 20 像素的透明邊框與一個 21 像素的透明邊框。這種不對稱設計，是為了避免 Chromium 把兩個 20.5 像素的邊框量化成各 20 像素，進而悄悄地把繪製出的三角形縮減一個像素。偶數尺寸則會平均分配。結果就是所要求的總繪製尺寸會在螢幕上完整保留。

上線前的無障礙與視覺測試

邊框三角形預設為裝飾性質，而產生器會把它的 HTML 程式碼片段標記為 aria-hidden="true" 來與之對應。這個選擇對工具提示指標、選單標籤旁的雪佛龍，或不具意義的分隔線而言是正確的。一旦這個形狀傳達任何視力正常的使用者能理解的資訊時，它就是錯的。如果三角形用來指出哪個選項被選取、可排序欄位的排序方向、表單欄位是否有效，或哪個accordion 列是展開的，這個靜默的程式碼片段就會讓螢幕閱讀器使用者失去這些資訊。請加上可見的文字標籤、在周圍按鈕加上 aria-label，或使用 sr-only 的 span，讓意義在移除裝飾形狀後仍能保留。

對比是第二項無障礙檢查。產生器繪製的是不透明的 HEX 邊框，所以你選的顏色就是使用者看到的顏色，不受主題影響。請在三角形擺放的背景上，對三角形的 HEX 與背景進行對比檢查，然後在深色主題下重複一次。在白色卡片上看得到的三角形，在深色卡片上可能會完全看不見，即使周圍的文字仍然清晰可讀。

請在 200% 縮放、高對比模式、強制色彩模式，以及常見的手機寬度下測試最終結果。預覽只能確認邊框的幾何結構，無法確認目的元件的完整無障礙或排版行為。光柵化仍可能因縮放與裝置像素比而有所不同，所以你在筆電上看到的像素，在手機上可能會因為一排反鋸齒而偏移。

實用的 UI 角色：為產生的 CSS 三角形

這項技巧在幾個反覆出現的 UI 模式中佔有一席之地。最常見的是用來將彈出視窗錨定到觸發按鈕的工具提示箭頭。三角形指向觸發按鈕，位於彈出視窗圓角框的緊鄰外側，並以與彈出視窗背景相同的 HEX 色上色，使其看起來像一個連續的形狀。下拉式選單中選單標籤旁的雪佛龍圖示則是近親——小巧、裝飾性，並向下指以表示下方還有更多選項。

其他角色包括卡片上的角落裝飾、通知橫幅內的小箭頭，以及用於在視覺上分隔頁面兩個區塊的分隔線。這些都是裝飾性的，符合產生器接受的 10 到 300 像素範圍，並使用單一的實心 HEX 顏色。它們每一個也都夠小，使得使用單一 SVG 圖示的成本會超過邊框三角形的便利性。

如果您的三角形旨在看起來像手繪的、以另一種意義裝飾——例如，卡片上的紙摺邊緣——那麼您已經走出了邊框三角形模型。邊框無法產生摺痕，而產生器也不會為分層效果輸出偽元素標記。對於這類工作，請使用 SVG 或 clip-path 多邊形來產生形狀，並從一開始就將邊框三角形視為錯誤的起點。

如需更深入的瞭解，請參閱CMYK 色彩代碼及其 CSS 命名色彩對應。

如需更深入的瞭解，請參閱產生 CSS 三次貝茲曲線時的疑難排解。