CSS 三角形產生器只能產生實心、直邊的三角形 —— 圓角尖端、弧形邊緣、空心中心以及描邊外框都不屬於它的輸出範圍。此工具會在瀏覽器內部建立經典的邊框技巧：一個寬度與高度皆為零的元素、兩條形成斜邊的透明邊框，以及一條指向選定方向的有色邊框。由於每個被繪製出來的邊都是一條筆直的矩形邊框，因此最終形狀永遠是一個具有平坦邊的三角形，其斜邊與另外兩條邊在銳角處相交。在被繪製的邊上沒有 border-radius 設定、沒有空心中心的參數，也沒有描邊寬度的控制選項，因為 CSS 中的邊框無法讓單獨一條邊彎曲、無法保留透明內部，也無法以描邊外框的形式繪製自身。如果你需要的是圓角或描邊的三角形，同一個產生器就無法被勉強產出；變通方法是改用 SVG 或 clip-path，它們天生就能承載路徑、曲線、填色與描邊。
邊框技巧產生器並非出於偏好而拒絕加入曲線；而是底層的 CSS 機制根本沒有任何屬性能夠彎曲單一條被繪製的邊。本文接下來會逐步說明這個產生器能與不能繪製的內容、這些限制為何來自邊框模型本身而非缺少某個開關、在僅需要實心三角形時產生乾淨結果的精確步驟，以及在不夠用時應該改用哪種替代方案。
產生器實際繪製的內容
CSS 三角形產生器將自身限制在一個定義明確的輸出範圍：一個四方向、純色、直邊的三角形，其唯一可調整的輸入為方向、寬度、高度，以及一個六位數的 HEX 色碼。頁面接受上、下、左、右作為方向、範圍 10 到 300 像素的整數尺寸，以及剛好一個以井字號開頭、後接六個十六進位字元（會被正規化為小寫）的顏色。即時結果會依據這些控制項立即更新；同一組邊框宣告同時驅動頁面上的預覽以及複製出來的 CSS 輸出，因此你貼上的程式碼片段會與你在畫面上看到的內容完全一致。
下表將每個輸入對應到產生的幾何結果，讓限制能一目了然。
| 輸入 | 可接受的值 | 對三角形的影響 |
|---|---|---|
| 方向 | 上、下、左、右 | 選擇哪一條邊框接收顏色，以及哪兩條保持透明 |
| 寬度 | 10–300 px 的整數 | 對於上／下方向：底邊長度（兩條透明側邊框的總和）。對於左／右方向：指向邊的長度 |
| 高度 | 10–300 px 的整數 | 對於上／下方向：指向邊的長度（有色邊框）。對於左／右方向：底邊高度 |
| 顏色 | # + 六個小寫十六進位數字 | 以不透明邊框形式繪製；不含 alpha、不含漸層、不含 CSS 變數、不含 currentColor |
這四個輸入以外的所有內容 —— 包括單邊的 border-radius、描邊寬度、填色規則、漸層停駐點、主題權杖、廣色域色彩語法，以及任意多邊形頂點 —— 都刻意被排除在產生器的範圍之外。其輸出與 MDN 背景與邊框指南中所記錄的正典 CSS 邊框三角形技巧採用相同的邊框幾何，並將長屬性明確地展開書寫，以便每個值都保持可審核。頁面會同步顯示 CSS 與 HTML，而產生與複製的動作完全在當前瀏覽器分頁中完成，沒有上傳、沒有帳號、沒有伺服器端算繪，也沒有儲存的設計狀態。
為何邊框幾何無法彎曲或描邊三角形
曲線與外框之所以在物理上無法達成，原因在於 CSS 邊框的繪製方式。CSS 中的邊框是沿著元素方塊一側的筆直矩形帶；它具有均勻的厚度、單一實心顏色，以及與相鄰邊框相接的四個尖角。沒有任何 CSS 屬性能將單一條邊框彎曲成弧線、能將有色邊框的內部挖空以留下描邊，或能繪製出同時具有內緣與外緣的邊框。即使是 border-radius（用於圓化元素邊角）也是套用於整個元素，而非套用於各別被繪製的邊 —— 而這個邊框三角形一開始就是以一個內容寬度與高度皆為零的元素構成，因此根本沒有元素邊角可以圓化。
這個技巧本身也強化了上述限制。以向上的三角形為例，產生器會將 border-left 與 border-right 設為透明，其寬度加總等於所要求的寬度，並將 border-bottom 設為所選顏色，其寬度等於所要求的高度。你所看到的斜邊其實根本不是斜的 —— 它們是兩條筆直的透明邊框，在與有色邊框相接的角落處相交，眼睛會自動在它們之間補上對角線。對於像 41 px 這類奇數總和，產生器會將垂直底邊拆成 20 px 與 21 px，讓被繪製的底邊在瀏覽器量化後仍保持精確，而不會悄悄遺失一個像素；像 40 px 這類偶數尺寸則會拆成 20 px 與 20 px。可見結果的數學形狀由這個結構所固定；其中沒有任何部分允許曲率、描邊或空心填色。
CSS 背景與邊框規範定義了此處所使用的長屬性邊框寬度、樣式與顏色，而 MDN 的背景與邊框指南 詳細記錄了透明邊框行為。這兩份來源都將邊框描述為筆直的不透明矩形，並未提供單邊曲率或描邊樣式外框的支援，這也正是依賴邊框的產生器無法達成這些效果的原因。W3C 規範 也明確採用長屬性的做法，這也說明了為什麼產生器會分別書寫 border-left、border-right 與 border-bottom（或 border-top、border-left、border-right），而不是將它們合併為簡寫形式。
逐步產生實心 CSS 三角形
當平坦邊的實心三角形就已足夠 —— 例如工具提示箭頭、標註指示、步驟指示器、雪佛龍風格的折疊標記，或裝飾性分隔線 —— 產生器只需三個簡短步驟即可完成工作。
- 選擇三角形方向（上、下、左或右），並設定介於 10 到 300 像素之間的整數寬度與高度值。若垂直底邊為奇數總和，產生器會自動將其拆成 floor 與 ceiling 的邊框寬度，以保留所要求的尺寸；像 40 px 這類偶數總和則會均勻拆成 20 px 與 20 px。
- 以 #RRGGBB 的形式輸入顏色，使用剛好六個十六進位數字；該值會被正規化為小寫。在即時預覽中，以接近實際大小與背景的條件檢視，包括淺色與深色表面，再進行任何複製動作。
- 同時複製 CSS 與 HTML。HTML 內含產生的 class 以及 aria-hidden="true"，這對於裝飾性箭頭來說是合適的。若三角形承載了狀態、方向、驗證、導航或其他意義，請將其替換為可見文字或周圍語意控制元件上的無障礙標籤。如果 class 名稱 lizely-triangle 會與現有的樣式表衝突，請同時在兩份輸出中重新命名。
你可以使用 CSS 三角形產生器 即時執行這些步驟，並一次複製兩份輸出。「複製 CSS」與「複製 HTML」會分別請求剪貼簿權限，因此若你的瀏覽器封鎖剪貼簿存取，程式碼區塊仍會保持可見以便手動選取，而頁面也不會錯誤地回報成功。
何時 SVG 或 Clip-Path 是更好的選擇
對於任何需要圓角尖端、弧形斜邊、空心內部、描邊外框、漸層填色、陰影、任意多邊形形狀，或真實 viewBox 驅動版面的情況，邊框技巧就會碰到瓶頸，此時正確的作法是更換工具。SVG 天生就能表達上述所有功能 —— 其路徑資料透過 Q 與 C 等指令支援曲線，透過 stroke-width 與 stroke-linejoin 支援描邊，並透過 linearGradient 與 radialGradient 定義支援漸層。帶有 polygon() 值的 clip-path 可以將元素遮罩為任何直邊形狀，且對簡單情況相當實用，不過它同樣無法讓邊緣彎曲，因此任何圓角三角形仍須仰賴 SVG。
權衡取捨在於複雜度。邊框三角形是單一零大小的 div 加上三條邊框宣告；SVG 三角形則是一個帶有 path 或 polygon 的標記元素、一個用於可預測縮放的 viewBox，以及在形狀承載意義時對 role 與 aria-label 等無障礙屬性的明確處理。clip-path 三角形則需要一個帶有內容的宿主元素，以及一個符合可見區域大小的裁切多邊形。每種方法的設定與審核成本都比邊框技巧更高，但每一種也是達成本文關鍵字所詢問之視覺結果的唯一實際途徑。邊框三角形產生器中的預覽只能確認邊框幾何，而非目的地元件的完整無障礙或版面行為，因此對於任何非平凡的形狀，正確的測試發生在你選對工具之後。
無障礙與視覺驗證
產生器所輸出的 HTML 片段會在單一 div 上加上 aria-hidden="true"，這會將該形狀從無障礙樹中移除。對於純粹裝飾性的三角形而言，這是正確的選擇 —— 例如指向某個工具提示的箭頭（其意義已由該工具提示的可見標籤承載）、位於標題內部但本身不帶資訊的雪佛龍，或兩個視覺上截然不同的區塊之間的分隔線。一旦三角形承載了狀態、方向或互動性，這就成了錯誤的選擇，例如僅以箭頭表示開啟或關閉狀態的下拉指示器、表單驗證標記，或僅以三角形作為唯一視覺提示的導航控制元件。在這些情況下，周圍的語意元素 —— 按鈕、連結或帶有標籤的區域 —— 必須具備可見文字、無障礙名稱，或兩者兼備，而裝飾性的三角形則對輔助科技保持隱藏。
第二個驗證步驟是視覺而非結構性的。被繪製的 HEX 顏色是不透明的，因此它不會繼承主題變數，也不會自行適應深色模式；複製之後，若將該字面值替換為可信的設計權杖，可以改善主題化效果，但目標語法必須受到支援，且透明側邊框必須保持透明。請在 200% 縮放、強制色彩模式，以及常見的行動裝置寬度下測試最終結果，以確保經點陣化處理的三角形在其將被使用的表面上保持清晰易讀。單一三角形的效能成本可忽略不計，但數百個裝飾性元素仍可能增加 DOM 與繪製負擔，因此應優先使用單一帶有裝飾形狀的語意控制元件，而非重複的隱藏控制元件，也不要為了在一個迴圈中大量產出形狀而動用這個產生器。
如需更深入的瞭解，請參閱 嚴格 CSS 十六進位的 Hex 轉 RGB 轉換器替代方案。
如需更深入的瞭解，請參閱 HTML 顏色名稱對照表：148 個 CSS 關鍵字參考。