CSS 三角形最常見的做法，是用一個內容寬度與高度皆為零的元素，透過兩條透明邊框構成斜邊，再用一條有色邊框指向選定方向。這個單一技巧（邊框手法）是所有以邊框為基礎的 CSS 三角形之根本，也是 CSS Triangle Generator 為你產生的內容，但它並非在頁面上繪製三角形的唯一方法。網頁設計師通常會在邊框手法、CSS clip-path、行內 SVG 以及背景漸層之間擇一，而每一種做法都在相容性、彈性與程式碼重量上做出不同的取捨。要在其中抉擇，主要取決於你實際需要什麼形狀、瀏覽器支援的下限為何，以及你願意承擔多少標記。

邊框手法之所以吸引人，在於它只需要展開式（longhand）的邊框宣告、擁有幾乎全面通用的瀏覽器支援，並產生一個僅供繪製、不占空間的小形狀，使排版盒保持空白。Clip-path 能給你任意多邊形與任意角度，但所使用的語法雖然在常青瀏覽器中已相當穩定，仍值得在較舊的目標環境中加以驗證。SVG 在標記上最為沉重，卻也最具表現力，能處理曲線、描邊與任意點位，不受平面實心色彩的種種限制。當你只需要一個方向性旗標時，背景漸層便相當實用，因為在 linear-gradient 中使用硬色停點，就能以低廉成本繪製直角三角形。一旦把各項取捨並列比較，紙上比較其實相當直觀。

how do i compare approaches to generate css triangle
比較 CSS 三角形做法並選擇正確方法

CSS 三角形的四種常見做法

邊框手法將元素的內容盒設為零，讓邊框負責呈現可見的部分。兩條相鄰的透明邊框構成斜邊，第三條有色邊框等於選定的高度或寬度，指向所要求的方向。例如向上的三角形具有一條有色的底邊框，以及透明的上邊框與左右邊框（此處原文上下邊配置關係以原文為準——譯註：原段此例為有色底邊、左右透明，向上指）；直角三角形則具有一條有色的左邊框，以及透明的頂部與底部邊框。此技巧純屬宣告式，除了繪製邊框外沒有額外執行成本，且能在任何支援 CSS 2.1 邊框的環境中存活。

使用 polygon() 函式的 Clip-path 能從任何矩形元素中切出三角形。由於元素保有真實的內容盒，其排版、點擊測試與溢散行為都與一般區塊元素相同，且能以任意角度塑造任意點數的多邊形。其取捨在於，可見的形狀是元素自身背景上的遮罩，因此漸層、影像與 currentColor 仍能自然流過，無需額外串接。

行內 SVG 將 svg 元素直接置入標記中，並以 polygon 或 path 指令繪製三角形。透過明確的 viewBox，形狀能以可預期的方式縮放，且 SVG 能表現純邊框手法無法比擬的曲線、描邊、填色與遮罩。其缺點在於標記重量較大，且需要與整體設計系統協調填色。

背景漸層以帶有硬色停點的 linear-gradient 繪製三角形。容器保留完整尺寸，因此排版與內距行為皆正常，僅需一條背景宣告即可繪製方向性箭頭。此路線最適合用於小型方向性旗標——可接受直角三角形、且不希望更動 DOM 的場合。

各做法的擅長與不足

下表從通常左右抉擇的幾個面向，比較這四種做法。所列功能以現行瀏覽器文件所支援者為準；邊框路線的瀏覽器細節則取自 CSS Triangle Generator 自身的合約。

做法 形狀支援 相容性 標記成本 最適用於
邊框手法 實心直邊三角形，四個方向 幾乎全面通用（CSS 2.1 邊框） 一個 div，附明確的展開式邊框宣告 裝飾性箭頭、提示框指標、分隔線
clip-path polygon() 任意多邊形、任意角度、任意邊數 在常青瀏覽器中穩健，較舊目標需另行驗證 一個 div 加一條 clip-path 宣告 現代排版、不規則形狀、銳角
行內 SVG 曲線、描邊、漸層、空心形狀、任意多邊形 對行內 SVG 而言全面通用 svg 加上一個 path 或 polygon 元素 具表現力的圖示、可縮放標記、主題化箭頭
帶硬色停點的 linear-gradient 直角三角形與方向性旗標 在常青瀏覽器中穩健 一條背景宣告，無需額外元素 追隨元素盒的純 CSS 箭頭

此比較顯示出往往左右抉擇的模式：當你想要盡可能小的 DOM，並在四個基本方向之一取得實心直邊三角形時，選擇邊框手法；當你需要任意角度且能仰賴現代瀏覽器時，選擇 clip-path；當形狀必須彎曲、空心或縮放至精確的 viewBox 時，採用 SVG；而當三角形只是個微小裝飾旗標、且元素本就因其他用途而存在時，則使用漸層。

何時邊框手法是正確選擇

只要需求是四個方向（上、下、左或右）中某一個方向的實心直邊三角形，且周邊設計不需要曲線、漸層或空心中心，邊框手法便在比較中佔有一席之地。提示框指標、麵包屑分隔線、手風琴指示器與下拉箭頭皆屬此類。由於元素的內容寬度與高度皆為零，三角形不會推移相鄰元素，因此可透過絕對定位對齊，或在文字旁浮動而不影響行高。邊框三角形在 200% 縮放與強制色彩模式下仍能維持其繪製形狀，這也是它們在無障礙裝飾性 UI 標記中仍是預設選項的部分原因。

此做法也能與設計權杖（design tokens）乾淨搭配。有色邊框是唯一承載品牌色彩的屬性，因此一旦三角形就緒，將字面 HEX 替換為自訂屬性只需一行變更。透明邊框必須維持透明，斜邊才得以呈現，因此任何權杖替換都應只針對指向邊框，並保持斜邊邊框不動。

對於已確定邊框手法是正確選擇、只想跳過數學計算的讀者，CSS Triangle Generator 直接套用四方向配方：它以 floor 與 ceiling 透明邊框切分垂直基邊，將完整的指向維度指派給一條有色邊框，並在即時預覽中呈現與複製輸出相同的宣告。

逐步產生邊框三角形

  1. 在瀏覽器分頁中開啟 CSS Triangle Generator。頁面會以預設的方向、寬度、高度與色彩呈現，讓你立即看到結果。
  2. 從上、下、左或右中選擇三角形方向。產生器會將該選擇對應到合適的有色邊框——上對應底邊、下對應頂邊、左對應右邊、右對應左邊——並讓垂直方向的兩條邊框保持透明。
  3. 將可見的寬度與高度設為介於 10 到 300 像素之間的整數。對向上或向下的三角形而言，兩條透明側邊框加總等於選定寬度，有色邊框等於選定高度。對向左或向右的三角形而言，透明的頂部與底部邊框加總等於選定高度，有色邊框等於選定寬度。
  4. 以 #RRGGBB 格式輸入六位數 HEX 色彩。產生器會將數值標準化為小寫，並以不透明邊框方式繪製；alpha 頻道、CSS 變數與 currentColor 明確不在此產生器的範圍內。
  5. 在實際使用的概略尺寸與背景上檢視即時結果。預覽使用與 CSS 輸出相同的衍生邊框宣告，因此所見即所複製。
  6. 先複製 CSS 區塊，再複製 HTML 區塊，透過專屬的複製按鈕操作。每次複製請求皆會分別向瀏覽器索取剪貼簿權限，並以剛複製的格式回報成功。若剪貼簿存取遭拒，兩個程式碼區塊仍會保持可見以便手動選取，頁面亦不會誤報成功。
  7. 若產生的 class 名稱 lizely-triangle 會與現有樣式表衝突，請予以重新命名，並同時更新 CSS 與 HTML 輸出，使兩者保持同步。HTML 片段包含一個帶有產生 class 與 aria-hidden="true" 的 div，這是針對裝飾性形狀的正確無障礙處理方式。

邊框手法無法產生的結果

邊框三角形有其刻意設下的限制，唯有將這些限制明文化，比較才不失真。元素可量測的內容盒為零，而其繪製的邊框卻占據空間，因此排版、變形、點擊測試、外框、溢散與對齊都可能比具備明確 viewBox 的 SVG 元素較不直觀。邊框三角形無法直接產生圓角尖端、彎曲邊緣、空心中心、漸層填色、描邊、複雜陰影或任意多邊形。這類需求應交由 SVG 或 clip-path 處理，且兩者在採用前皆應在目標環境中測試支援度。

HEX 色彩會以不透明邊框方式繪製。Alpha 色彩、CSS 變數、漸層、currentColor、廣色域語法與主題權杖皆不在此聚焦工具的產生範圍內。複製完成後，將字面 HEX 替換為可信的設計權杖可改善主題化效果，但透明側邊框必須維持透明，幾何結構才能成立。位於文字旁的三角形也應在淺色與深色主題下檢查，而不宜假設其能自動繼承足夠的對比。

奇數基線如何保持精確

此比較通常不會浮現的一個微妙之處，在於奇數尺寸是以 floor 與 ceiling 拆分，而非平均分配。以底邊為 41 像素的向上三角形為例，透明的左、右邊框會分別變成 20 像素與 21 像素，而非各 20.5 像素。原因在於 Chromium 可能將兩條 20.5 像素的邊框量化為各 20 像素，導致繪製的底邊由 41 像素縮為 40 像素。這一個像素的不對稱，是為了保留所要求的總繪製尺寸，而非默默損失一個像素。隨著縮放層級與裝置像素比的不同，點陣化結果仍可能有差異，因此繪製結果是幾何與瀏覽器之間的合約，而非與渲染無關的保證。

在目的地元件中驗證結果

比較各種方法只能幫助你選對方法；接下來要確保所選的三角形在它放置的位置表現正確。在三角形已就位的情況下開啟目的地頁面，並以 200 百分比縮放、開啟高對比模式、開啟強制色彩，以及針對目標受眾最常見的行動裝置寬度進行檢查。確認裝飾用的 aria-hidden="true" 是否仍然合適，因為對於不傳達任何資訊的裝飾性箭頭或分隔線來說是正確的，但如果三角形用於傳達狀態、方向、驗證或導覽，就不應僅依賴這個靜音的程式碼片段。請為周圍的互動控制項加入可見的文字或可存取的標籤，並讓裝飾性的三角形對輔助技術保持隱藏。

對於想要深入比較這四種方法（包括各自適用的情境）的讀者，挑選正確方法的指南會透過範例逐步說明同樣的決策樹。MDN 的 CSS 背景與邊框指南，以及 CSS Backgrounds and Borders Level 3 規格文件，記載了所有基於邊框的三角形所依賴的底層邊框屬性、各別長式屬性的寬度、樣式與顏色。

如果你正在權衡各種選項，逐步疑難排解 CSS 核取方塊產生器輸出對此有詳細說明。