CSS 三角形產生器會將您選擇的顏色，精準地塗在一個零尺寸元素的單一邊框上 —— 也就是指向您選定方向的邊框，而其餘兩條垂直邊框則保持透明，讓斜邊能夠顯現出來。顏色欄位僅接受井字號後接恰好六個十六進位數字，且會自動轉為小寫，這個單一的 HEX 值就是工具全部的色彩詞彙。由於不會產生 alpha 通道、漸層、currentColor 以及 CSS 變數，為正確方向挑選正確的 HEX，是三角形在頁面上呈現正確樣貌的唯一方式。錯誤的顏色輸入會被拒絕，而不是悄悄地被裁剪，因此在貼回樣式表之前花一點時間驗證您的 HEX，日後能省下除錯的時間。預覽畫面與複製的程式碼共用同一組衍生出來的邊框宣告，所以您看到的顏色，就是實際落入 CSS 中的顏色，沒有伺服器往返，也沒有意外的代碼化處理。在此情境下選好顏色，意味著挑選一個不透明的 HEX，既能在「四方向邊框技法」下存活，又能與三角形實際放置的背景形成對比，而不會外溢到幾何結構所依賴的透明側邊框。
產生器接受哪些顏色
顏色輸入刻意設計得很狹隘:井字號後接六個十六進位數字，在頁面將您的輸入標準化後以小寫書寫。涵蓋了像是 #2c7be5、#000000 與 #ffffff 這類的值，但除此之外都不接受。具名的 CSS 顏色(例如 "tomato" 或 "steelblue")、三位數簡寫(例如 #abc)、八位數含 alpha 的 HEX(例如 #2c7be5cc)、rgb() 與 hsl() 函式、CSS 變數，以及 color-mix 運算式，都不會被 CSS 三角形產生器接受，且會被拒絕而非悄悄改寫。由於即時預覽使用與 CSS 輸出相同的衍生邊框宣告，輸入無效的值只會讓上一個有效的顏色留在原位 —— 不會出現警告對話框，也沒有替代值。瀏覽器的輸入控制會限制一般輸入，但底層的產生器會獨立拒絕格式錯誤的輸入，以免程式化呼叫偷偷帶入 alpha 通道。尺寸也遵循同樣的紀律:寬度與高度必須是介於十到三百像素之間的整數，小數或超出範圍的值會被拒絕，而不是悄悄裁剪。
您選擇的六位數 HEX 會被塗成不透明的邊框。沒有透明度滑桿、沒有 alpha 通道，也沒有漸層 —— 您看到的顏色，就是複製到 CSS 中的顏色。如果您的設計需要半透明或漸層填色，此產生器所產生的 HEX 絕對是錯誤的起點，下方關於顏色限制的章節會說明替代方案。了解塗上的邊框是完全不透明，也對對比度有實際的影響:三角形會以實心形狀落在任何背景上，在平面模擬圖中看起來不錯的 HEX，可能會在有分層背景的真實介面中消失。
挑選 HEX 並驗證結果
為 CSS 三角形挑選 HEX 雖然是個小決定，卻會帶來不成比例的後果，因為同一個值會被塗在一條邊框上，並與元素後方的任何內容進行對比。以下步驟將帶領您從輸入一路走到貼上 CSS 的完整挑選流程。
- 先挑選方向，因為所選的 HEX 只會塗在其中一條邊框上 —— 也就是指向您選定方向的邊框 —— 而兩條垂直邊框必須保持透明，斜邊才得以呈現。
- 在顏色欄位輸入或貼上井字號加上恰好六個十六進位數字，並確認預覽立即更新。如果欄位拒絕您的輸入，請檢查是否有多餘的空格、夾雜的 alpha 數字，或使用了具名顏色而非 HEX。
- 將預覽與三角形實際放置的真實背景顏色、圖片或圖樣進行比對。在白色背景上看起來正確的 HEX，可能會在有底色的表面上完全看不見，因此請在實際的目的地上驗證，而不是僅憑產生器的預設背景。
- 分別點擊複製 CSS 與複製 HTML。每一次請求會依序要求剪貼簿權限，成功狀態會標示複製的格式。如果瀏覽器政策拒絕剪貼簿存取，兩段程式碼仍會保持可見，讓您手動選取文字。
- 貼上後，如果預設類別與現有的樣式表衝突，請重新命名，並同步更新 CSS 與 HTML 的輸出，以維持類別對應。如果您維護設計令牌系統，請將樣式表中的字面 HEX 替換為對應的令牌，但請確認您的建置流程支援該語法，且透明的側邊框仍保持透明。
究竟是哪一條邊框承載您的顏色
在不了解哪一條邊框接收顏色的情況下挑選 HEX，是產生的三角形顏色或尺寸錯誤最常見的原因。邊框技法完全透過邊框繪製可見的形狀，所以方向不僅僅是方位，它直接決定了您的顏色被指派到哪一條邊框。向上的三角形使用透明的左、右邊框加上有顏色的底邊框。向下的三角形使用有顏色的頂邊框。向左的三角形使用透明的頂、底邊框加上有顏色的右邊框。向右的三角形使用有顏色的左邊框。您的 HEX 必須落在正確的邊框上，而兩條垂直邊框必須保持透明，否則形狀會塌陷成實心矩形。
| 方向 | 有顏色的邊框 | 透明的邊框 | 尺寸關係 |
|---|---|---|---|
| 向上 | border-bottom | 左、右 | 透明兩側相加等於寬度;底邊等於高度 |
| 向下 | border-top | 左、右 | 透明兩側相加等於寬度;頂邊等於高度 |
| 向左 | border-right | 上、下 | 透明上下邊框相加等於高度;右邊等於寬度 |
| 向右 | border-left | 上、下 | 透明上下邊框相加等於高度;左邊等於寬度 |
對於垂直三角形，兩條透明側邊框相加等於所要求的寬度，而有顏色的邊框等於所要求的高度。對於水平三角形，透明的頂、底邊框相加等於所要求的高度，而有顏色的邊框等於所要求的寬度。偶數尺寸會在兩條透明邊框間均勻分配。奇數尺寸則會使用向下與向上取整的值，例如 41px 的底邊會拆成 20px 與 21px，因為 Chromium 可能將兩個 20.5px 的邊框量化為各 20px，進而悄悄遺失一個像素。產生器會明確寫出每一條展開式屬性，讓幾何結構保持可審核，您可以直接從複製的 CSS 中讀取精確的邊框寬度，無需猜測。
對比度、主題與真正重要的背景
放置在文字旁的三角形，承擔著單獨裝飾性形狀所沒有的對比度責任。您選擇的不透明 HEX 將以實心區塊的形式落在它所接觸的任何背景上，而且因為塗上的邊框會延伸到零尺寸內容框之外，該區塊在視覺上看起來可能比其測量尺寸更大。請使用 顏色對比度檢查工具測試最終的擺放位置，而不是憑空從色塊推測。如果三角形承載語意，周圍的控制項應提供可存取的文字或標籤;三角形本身預設帶有 aria-hidden true，對於裝飾性箭頭是正確的，但當形狀傳達狀態或方向時就不恰當了。
顏色選擇也必須能夠在主題切換中存活。在淺色背景上看起來清楚的 HEX，可能會在深色背景上消失，而產生器只會輸出一個字面值，不會自動切換。如果您的設計同時使用淺色與深色主題，請挑選一個能在兩者上都形成對比的 HEX，或是計畫在複製後於樣式表中替換該字面值。Windows 的強制色彩模式以及其他平台的高對比設定，可能會完全覆寫您的顏色，因此請驗證當三角形的 HEX 被系統色取代時，周圍的內容是否依然清晰可讀。以 200% 縮放、在行動裝置寬度下，以及在強制色彩模擬中瀏覽最終結果，可以搶在使用者之前抓到大多數意外狀況。請記住，即時預覽只能確認邊框幾何，無法涵蓋目的元件的完整可存取性或版面行為，因此對比度的決策責任在您，不在工具。
這個顏色做不到的事(以及替代方案)
此產生器輸出的 HEX 是不透明、平整且邊緣筆直的。它無法直接產生圓角尖端、弧形邊緣、空心形狀、漸層填色、描邊、柔和陰影，或任意多邊形 —— 這些都需要使用帶有明確 viewBox 的 SVG 幾何，或 clip-path 的遮罩與形狀能力。圓角或描邊 CSS 三角形指南會帶您了解邊框技法的真實限制，以及在哪個節點應該改用其他工具。
產生器同樣不會產生 alpha 顏色、CSS 變數、漸層、currentColor、廣色域語法或設計令牌。這是刻意的範圍決定:它只輸出一個經瀏覽器驗證並完全照原樣繪製的 HEX。一旦這個 HEX 進入您的樣式表，您可以將其替換為主題令牌，但請確認您建置流程輸出的令牌語法在目標瀏覽器中受支援，且透明的側邊框仍保持透明 —— 一個在斜邊上解析為半透明值的令牌，會把三角形填滿，並抹除形狀本身。對於大多數實際工作，正確的模式是在初始版面配置期間保留產生器的字面 HEX，在出貨前替換為令牌，並在淺色與深色主題中重新測試。邊框宣告本身記載於 MDN 的背景與邊框指南，以及 CSS 背景與邊框規範中，兩者皆定義了產生器明確寫出的展開式寬度、樣式與顏色。
若想更深入了解，請參閱 《HEX 轉 RGB 解析:CSS 標記法與通道運算》。