一份有完整文件紀錄的 CSS 三角形 runbook（操作手冊），是一份以書面形式記錄的紀錄，內容包含你在每次建立四方向邊框三角形時所使用的精確輸入值、步驟順序，以及所產生的程式碼片段，並集中保存在同一處，讓你不必重新推導技巧就能重現這個形狀。把工作流程視為一份「配方」而非一次性任務，能讓這個邊框三角形技巧變成可重複使用的資產：同事可以照著做、未來的你也能回頭查閱、專案 wiki 也可以把它放在其他 UI 基本元件旁邊。這份配方會涵蓋你選擇的方向、所輸入的寬度與高度、所採用的六位數 HEX 色碼、工具所輸出的同步 CSS 與 HTML，以及你在其上額外加入的無障礙或命名決策。它也會指出產生器所強制執行的限制，因為這些限制說明了奇數像素的拆分方式、嚴格的色彩格式，以及在無聲中維持幾何正確性的整數範圍。
一份有完整文件紀錄的 CSS 三角形 runbook 實際上包含什麼
runbook 與程式碼片段並不相同。片段是你貼進樣式表裡的內容；runbook 則是你會交給一個從未開啟過這個工具的人。把工作流程視為一份配方，代表要記錄你輸入的內容、輸入的順序、你提交的輸出，以及那些無法放進程式碼本身的小決策。對 CSS Triangle Generator 而言，那些非程式碼的決策通常包含 class 名稱、無障礙處理方式，以及日後是否要以設計權杖（design token）取代字面 HEX 值的規劃。一旦把這些寫下來，三角形就能在不同的專案、程式碼審查與未來的維護工作中重現，也能避免團隊的下一個人從頭重新發明這個技巧。
在產生之前需要記錄的輸入
這個產生器強制使用一組精簡且經過審慎設計的輸入，你的 runbook 應該對應這組輸入，六個月後回頭查看時才不會漏掉任何東西。下表列出每一項輸入、工具所接受的值，以及你在紀錄中應該寫下的內容。
| 輸入 | 接受的值 | 應該記錄的內容 |
|---|---|---|
| 方向 | up、down、left 或 right | 以英文單字寫下所選的方向 |
| 寬度 | 10 到 300 之間的整數像素 | 整數像素數值 |
| 高度 | 10 到 300 之間的整數像素 | 整數像素數值 |
| 顏色 | 井字號加上六位十六進位數字 | 與複製內容完全一致的小寫 HEX 字串 |
| Class 名稱 | 任選的 CSS 識別字 | 在兩段輸出中實際使用的 class 字面值 |
超出這些列舉範圍的內容都不屬於支援的輸入，因此你的文件可以放心地略過 alpha 顏色、CSS 變數、漸層、currentColor、具名顏色、小數，或超出所宣告範圍的值。把支援的形狀記錄下來，正是 runbook 得以保持簡短、易於閱讀的原因之一。
產生並記錄的四步驟配方
這是紀錄的核心內容。以下四個步驟對應工具本身的實際使用順序，同時也會作為專案 wiki 中的標準條目。
- 選擇方向、整數寬度與高度，以及三角形應使用的六位數 HEX 色碼。寬度與高度都接受 10 到 300 之間的整數像素；顏色必須是井字號加上正好六位十六進位數字，且會被標準化為小寫。
- 在三角形實際顯示的近似尺寸與背景上檢查即時預覽。邊框幾何對像素量化很敏感，因此你在預覽中看到的尺寸，就是著色邊框在頁面上實際繪製的尺寸。
- 分別複製 CSS 與 HTML，並依需求保留或替換裝飾用途的無障礙處理。「複製 CSS」與「複製 HTML」會各自獨立地要求剪貼簿權限；若瀏覽器拒絕，兩段程式碼區塊都會保持可見以供手動選取，且頁面不會誤報成功。
- 若預設 class 會與現有樣式表衝突，請重新命名 class，然後把兩段片段一起儲存，確保 HTML 參考永遠指向對應的 CSS class。
要貼進筆記中的程式碼片段剖析
一份實用的 runbook 會說明片段為何長成這個樣子，而不僅僅是告訴你該貼什麼。CSS 使用一個內容寬度與高度都為零的元素。兩條透明邊框構成兩條斜邊，一條著色邊框指向所選的方向。對向上的三角形而言，這代表左、右兩條透明邊框加上底部一條著色邊框；向下的三角形則把著色邊框放在頂部；向左指的三角形把著色邊框放在右側，頂部與底部邊框保持透明；向右指的三角形則把著色邊框放在左側。實作時會明確寫出每一個 longhand（展開式）屬性，讓程式碼審查時幾何關係一目了然、可供檢視。
HTML 片段是一個帶有產生器所產生 class 以及 aria-hidden="true" 的單一 div。這個屬性會告訴輔助技術忽略這個形狀，這對於純裝飾性的箭頭、分隔線或視覺點綴來說是正確的處理方式。你的文件應該把這項決策明確標示出來，以免未來的維護者在未經思考的情況下把它移除，同時讓任何把三角形當作有意義指標的人，知道應改為在周圍的控制元件上加上下可見文字或無障礙標籤。
紀錄中應該放一個單一的數字範例，讓奇數像素規則變得具體。以一個寬度為 41 像素的向上三角形為例。兩條透明側邊框的寬度必須相加為 41，因此產生器會把它拆成 20px 與 21px，而不是 20.5px 與 20.5px。否則 Chromium 可能會把兩條 20.5px 的邊框各自量化為 20px，無聲地從要求的總寬度中漏掉一個繪製像素。著色的底部邊框寬度則等於完整的 41px 高度。在 runbook 中寫下「20 加 21，不是 20.5 加 20.5」，就能避免這條規則日後被不知情的編輯者「修正掉」，同時也讓上下邊界邏輯對任何閱讀片段的人都清晰可見。
值得保留在紀錄中的限制與無障礙備註
這個產生器的功能刻意設計得很精簡，而這種精簡正是片段值得信賴的原因之一。邊框三角形只能是實心、直邊的形狀：沒有圓角尖端、沒有弧形邊緣、沒有中空內部、沒有漸層填色、沒有描邊，也沒有任意的多邊形。如果你的設計需要以上任何效果，runbook 應該一開始就明說，並指向 SVG 或 clip-path 作為替代方案。關於邊框技巧是否適合用於你正在打造的元件這個更廣泛的問題，請參考 產生 CSS 三角形的決策檢查清單。
所繪製的顏色為不透明，因此這個工具不會產生 alpha、CSS 變數、漸層、currentColor、廣色域語法或設計權杖。runbook 條目中可以合理地寫下：「複製之後，把顏色字面值換成 CSS 變數，並確認目標語法有支援。」無障礙議題因為預設處理方式並非萬用，值得在紀錄中獨立成段說明。預設的 aria-hidden="true" 只有在三角形為純裝飾性時才是正確的。如果這個形狀是用來傳達狀態、方向、驗證結果、導航意義，或任何其他語意，那麼文件必須指示讀者：在周圍的互動元件上加上下可見文字或無障礙標籤，並讓裝飾性的三角形對輔助技術保持隱藏。就效能而言，單一三角形幾乎不會造成問題，但 runbook 仍可註明：數百個裝飾性元素會增加 DOM 與繪製負擔，因此應優先使用「一個帶有裝飾形狀的語意控制元件」，而非重複出現的隱藏控制元件。
何時應該修訂已記錄的步驟
runbook 並非一次性的撰寫文件，而是一份會持續演進的紀錄。以下三個觸發條件值得進行修訂。第一，主題變更：若專案把三角形的顏色從字面 HEX 換成 CSS 變數或設計權杖，請更新片段與相關說明，讓下一位讀者知道該信任哪個值，並明確指出在替換之後，兩條透明側邊框仍須保持透明的部分。第二，尺寸修訂：若寬度或高度超出 10 到 300 的範圍，或新增了方向，runbook 應反映新規範，而不是沿用舊的數字。第三，語意變更：若原本純裝飾的三角形變成具有意義的指標，反之亦然，則必須重新檢視無障礙段落與片段中的 aria 處理方式，並在 200% 縮放、高對比模式、強制色彩模式，以及常見的行動裝置寬度下，驗證最終的形狀。
要測試最終的成果，而非僅僅測試文件。即時預覽能確認邊框幾何，但無法確認目的元件完整的無障礙或版面行為。rasterization（光柵化）仍可能因縮放與裝置像素比而有所不同，因此在工具中看起來乾淨的結果，在 200% 縮放或強制色彩模式下可能會顯得模糊或刺眼。runbook 應該提醒讀者驗證的是周圍的元件，而非僅僅三角形本身。關於底層屬性的參考資料，MDN CSS 背景與邊框指南 記錄了邊框屬性與透明顏色行為，而 W3C CSS Backgrounds and Borders Level 3 規格 則定義了產生器所依賴的 longhand 邊框寬度、樣式與顏色。精確的尺寸限制與方向序列化是刻意制定的產品內部規則，因此應如實記載為產品規則，而非將其包裝成通用的三角形標準。
延伸閱讀：色彩名稱列表：查找並複製任何 CSS HEX 值。