CSS 三角形最常由一個元素的內容寬度和高度皆為零來繪製，其中兩個透明邊框形成斜邊，一個有顏色的邊框指向所選方向。這個單一技巧（邊框技巧）是所有基於邊框的 CSS 三角形的基礎，也是 CSS Triangle Generator 為你建立的內容，但它並不是在頁面上放置三角形的唯一方法。網頁設計師通常會在邊框技巧、CSS clip-path、行內 SVG 和背景漸層之間做選擇，每一種都會在相容性、彈性和程式碼權重上做出不同方向的取捨。要在其中選擇，主要取決於你實際需要的形狀、你的瀏覽器支援底線，以及你願意繼承多少標記。

邊框技巧之所以吸引人，是因為它除了展開式 border 宣告之外不需要任何東西，實際上擁有普遍的瀏覽器支援，並產生一個小型、純繪製的形狀，使配置方塊保持空白。Clip-path 讓你能使用任何多邊形和任何角度，但其語法雖然在常青瀏覽器中很穩健，仍值得在較舊的目標瀏覽器中驗證。SVG 在標記方面是最重的選項，但表現力最強，能處理曲線、描邊和任意點，而不受單一純色的限制。背景漸層在你只需要方向性標記時很有用，因為線性漸層中的硬色停點可以便宜地渲染出直角三角形。只要把取捨並列比較，紙上談兵就會變得很直觀。

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

CSS 三角形的四種常見方法

邊框技巧方法將元素的內容方塊設為零，讓邊框負責可見的工作。兩個相鄰的透明邊框形成傾斜的兩邊，第三個有顏色的邊框等於選定的高度或寬度，指向所要求的方向。例如，一個向上的三角形有一個有顏色的底邊框，伴隨透明的左和右邊框；一個向右的三角形有一個有顏色的左邊框，伴隨透明的頂部和底部邊框。這個技術純粹是宣告式的，除了繪製邊框外沒有額外的執行階段成本，並且在每個支援 CSS 2.1 邊框的環境中都能存活。

Clip-path 搭配 polygon() 函式可以從任何矩形元素中切割出三角形。因為元素保留了真實的內容方塊，所以配置、點擊測試和溢出的行為會與任何區塊相同，而且你可以用任意角度塑造任意數量的點。取捨在於，可見的形狀是元素自身背景上的一個遮罩，因此漸層、影像和 currentColor 仍能自然流動，不需要額外的設定。

行內 SVG 將 svg 元素直接放在標記中，並使用 polygon 或 path 指令繪製三角形。透過明確的 viewBox，形狀可以預測地縮放，而且 SVG 能表達曲線、描邊、填色和遮罩，這是任何僅使用邊框的方法都無法比擬的。缺點在於標記權重，以及需要將填色與其餘設計系統協調。

背景漸層使用帶有硬色停點的線性漸層繪製三角形。容器保留其完整大小，因此配置和內邊距行為正常，而且你可以僅用一個背景宣告就繪製出一個方向性箭頭。當你只需要小型方向性標記、可接受直角三角形，且不想觸碰 DOM 時，這條路線是最佳選擇。

每種方法擅長處理什麼，又無法處理什麼

下表針對通常會影響選擇的幾個面向，比較這四種方法。所列出的功能是目前瀏覽器文件所支援的功能；邊框路徑的瀏覽器內部細節取自 CSS Triangle Generator 自身的合約。

方法 形狀支援 相容性 標記成本 最適合
邊框技巧 實心直邊三角形，四個方向 實際上普遍支援（CSS 2.1 邊框） 一個 div，使用明確的展開式 border 宣告 裝飾性箭頭、工具提示指標、分隔符
clip-path polygon() 任何多邊形、任何角度、任意邊數 在常青瀏覽器中很強，建議驗證較舊的目標 一個 div 加上一個 clip-path 宣告 現代配置、不規則形狀、銳角
行內 SVG 曲線、描邊、漸層、空心形狀、任意多邊形 普遍支援行內 SVG svg 加上 path 或 polygon 元素 表現豐富的圖示、可縮放標記、主題化箭頭
帶硬色停點的線性漸層 直角三角形和方向性標記 在常青瀏覽器中很強 一個背景宣告，無額外元素 跟隨元素方塊的純 CSS 箭頭

這個比較顯示了通常會決定選擇的模式：當你想要盡可能小的 DOM，並在四個基本方向中有一個實心直邊三角形時，選擇邊框技巧；當你需要任意角度且能依賴現代瀏覽器時，選擇 clip-path；當形狀必須是曲線、空心或縮放至精確的 viewBox 時，使用 SVG；當三角形是個微型裝飾性標記，且元素已因其他原因存在時，則使用漸層。

何時邊框技巧是正確選擇

只要需求是一個四個方向（向上、向下、向左或向右）之一的實心直邊三角形，且周圍設計不需要曲線、漸層或空心中心，邊框技巧就會在比較中佔有一席之地。工具提示指標、麵包屑分隔符、手風琴指示器和下拉式雪佛龍箭頭都符合這個輪廓。由於元素的內容寬度和高度皆為零，三角形不會推擠相鄰元素，因此可以使用絕對定位對齊，或浮動在文字旁邊而不會改變行高。邊框三角形在 200% 縮放和強制色彩下也能保持其繪製形狀，這也是它們仍是無障礙裝飾性 UI 標記預設選項的原因之一。

這種方法也能乾淨地與設計權杖搭配。有顏色的邊框是唯一承載品牌色彩的屬性，因此一旦三角形就位，將字面 HEX 替換為自訂屬性只需一行變更。透明邊框必須保持透明，斜邊才能正確渲染，因此任何權杖替換都應針對單一指向邊框，而不要動到斜邊邊框。

對於已經知道邊框技巧是正確選擇、只想跳過數學計算的讀者，CSS Triangle Generator 會直接套用四方向配方：它使用 floor 和 ceiling 透明邊框分割垂直基邊，將完整指向尺寸指派給一個有顏色的邊框，並在即時預覽中顯示與複製輸出中出現的相同宣告。

逐步產生邊框三角形

  1. 在瀏覽器分頁中開啟 CSS Triangle Generator。頁面會以預設方向、寬度、高度和顏色呈現，讓你立即看到結果。
  2. 從向上、向下、向左或向右中選擇三角形方向。產生器會將該選擇對應到適當的有顏色邊框——向上對應底部、向下對應頂部、向左對應右側、向右對應左側——並使垂直的兩側邊框保持透明。
  3. 將可見寬度和高度設為介於 10 到 300 像素之間的整數。對於向上或向下的三角形，兩個透明側邊框合計為選定的寬度，有顏色邊框等於選定的高度。對於向左或向右的三角形，透明頂部和底部邊框合計為選定的高度，有顏色邊框等於選定的寬度。
  4. 以 #RRGGBB 格式輸入六位數 HEX 顏色。產生器會將該值標準化為小寫，並將其繪製為不透明邊框；alpha 通道、CSS 變數和 currentColor 刻意不在產生器的範圍內。
  5. 在將使用的近似大小和背景下檢視即時結果。預覽使用與 CSS 輸出中相同的衍生 border 宣告，因此看到的就是會被複製的內容。
  6. 先複製 CSS 區塊，再複製 HTML 區塊，使用專屬的複製按鈕。每次複製請求會分別向瀏覽器要求剪貼簿權限，並以剛才複製的格式回報成功。如果剪貼簿存取被拒絕，兩個程式碼區塊仍會保持可見以便手動選取，且頁面不會虛報成功。
  7. 如果 lizely-triangle 會與現有樣式表衝突，請重新命名產生的 class，並同時更新 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 percent 縮放、開啟高對比模式、啟用強制色彩，以及針對目標使用者最常見的行動裝置寬度來檢視。請確認裝飾用的 aria-hidden="true" 仍然合適，因為對於不傳達任何資訊的裝飾性箭頭或分隔線來說這是正確的，但如果三角形用於傳達狀態、方向、驗證結果或導覽功能，就不能只依賴這個靜音的程式碼片段。請在周圍的可互動控制項中加入可見文字或無障礙標籤，並讓裝飾性的三角形對輔助科技保持隱藏。

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