CSS 三角形產生器會在您重新輸入相同的方向、寬度、高度與六位數 HEX 顏色時，回傳完全相同的 CSS 與 HTML，因為整個流程都是在您的瀏覽器中本機執行，沒有儲存的狀態、沒有遠端帳號，也沒有任何會在不同次執行間產生差異的隱藏伺服器步驟。在本工具中，三角形完全由這四個輸入所定義:指向方向(上、下、左、右)、可見寬度、可見高度，以及一個以小寫字母撰寫的嚴格六位數十六進位顏色。只要這四個數值與您第一次使用的相同，完整寫法 (longhand) 的 border 宣告、lizely-triangle 類別，以及同步的 CSS 與 HTML 區塊就會來自同一個本機產生流程，因此結果能在目前的瀏覽器分頁中重現。仍有兩個實際細節會影響像素級的完全重現:奇數的尺寸總和會分割為 floor 與 ceiling 的像素值，而縮放等級或裝置像素比 (device pixel ratio) 則會改變相同 CSS 在螢幕上的光柵化結果。請將這四個輸入視為您的真相來源，如此一來產生的三角形就能可靠地重現。
鎖定輸出結果的四個輸入
CSS 三角形產生器接受一組小而嚴格的輸入，這種嚴格性正是讓輸出能夠重複的關鍵。在這些輸入之外，工具要嘛拒絕該數值，要嘛根本沒有可變動的空間，因此您複製的 CSS 與 HTML 不會在多次執行間悄悄改變。
方向是第一個輸入，且只接受以下四個值之一:up、down、left、right。寬度與高度接受介於 10 到 300 像素之間的整數。瀏覽器控制項不接受小數、負數，以及超出範圍的數值;純產生器也會獨立拒絕這些輸入，絕不會靜默地限制無效的程式化輸入，也不會輸出部分程式碼。顏色必須是井號 (#) 加上六個十六進位數字，例如 #1a73e8，該數值會在進入輸出區塊前被標準化為小寫。
這四個欄位是整個流程中唯一的變數。類別名稱、程式碼片段的結構，以及完整寫法 (longhand) 的 border 宣告，全都是直接從這四個輸入衍生而來，因此相同的四個輸入必定產生相同的程式碼片段。
逐步重現相同結果
- 在全新的分頁中開啟 CSS 三角形產生器，確保頁面中沒有任何來自先前工作階段的意外狀態。
- 選擇您之前使用的相同方向:up、down、left 或 right。方向決定了哪一條 border 會被填上顏色，以及哪兩條 border 維持透明。
- 輸入與先前相同的寬度與高度，皆為介於 10 與 300 之間的整數。請逐字元比對之前的數值，包括欄位中不包含單位的特性。
- 以 #RRGGBB 形式輸入相同的六位數 HEX 顏色。請保留前導井號，並使用小寫數字;工具會自動標準化大小寫，但使用與上次相同的大小寫能讓比對更加直觀。
- 分別使用「Copy CSS」與「Copy HTML」按鈕，並將兩個區塊一起保留。HTML 程式碼片段帶有 CSS 作用的目標類別 lizely-triangle，缺少其中一半就會破壞同步的輸出。
方向對應到 border 的對應表
每個方向都是一個明確的配方。CSS 三角形產生器的方向指南說明了四種指向選項之間的視覺差異，而 W3C 的 CSS Backgrounds and Borders Level 3 規格文件則記錄了該配方所使用的完整寫法 (longhand) border 屬性。
| 方向 | 填色的 border | 透明的 border | 繪製形狀的幾何 |
|---|---|---|---|
| Up | Bottom | Left, Right | 頂點朝上，底邊位於填色的 border 上 |
| Down | Top | Left, Right | 頂點朝下，底邊位於填色的 border 上 |
| Left | Right | Top, Bottom | 頂點朝左，底邊位於填色的 border 上 |
| Right | Left | Top, Bottom | 頂點朝右，底邊位於填色的 border 上 |
尺寸如何分配到各個 border
之所以能夠重現，正是因為相同的整數尺寸永遠會產生相同的 border 寬度，但有一個規則常讓人感到意外。對於向上或向下的三角形，兩條透明的側邊 border 相加等於您輸入的寬度，而單一填色的 border 則等於高度。對於向左或向右的三角形，兩條透明的頂部與底部 border 相加等於高度，而填色的 border 則等於寬度。偶數總和會對半分;奇數總和則會拆分為 floor 與 ceiling 兩個值，以便保留所要求的總和，而不會在瀏覽器的像素量化過程中悄悄遺失。
計算範例:以 41 像素的底邊為例。floor(41 / 2) = 20,ceiling(41 / 2) = 21，因此兩條透明的側邊 border 會被寫為 20px 與 21px。20 + 21 = 41px。只要您重新輸入 41，就會得到相同的數字，因為這個拆分是輸入的確定性函式，而不是從已繪製的畫布測量而來。寬度與高度指南展示了這些數值是如何流入 border 宣告的。
| 三角形方向 | 尺寸如何拆分 |
|---|---|
| 向上或向下(垂直) | 兩條透明的側邊 border 相加等於寬度;填色的 border 等於高度 |
| 向左或向右(水平) | 兩條透明的頂部與底部 border 相加等於高度;填色的 border 等於寬度 |
| 偶數總和 | 精準對半分，例如 100px 的底邊會拆成 50px 與 50px |
| 奇數總和 | Floor 與 ceiling，例如 41px 的底邊會拆成 20px 與 21px，以避免瀏覽器的像素量化問題 |
為什麼相同的輸入不會產生差異
產生器沒有儲存的設計狀態、沒有上傳功能，也沒有伺服器端的渲染。繪製即時預覽的邏輯同時也負責寫入 CSS 與 HTML 輸出，因此預覽與程式碼是由同一組衍生出的 border 宣告所產生，而不是兩條平行的路徑。複製成功時的狀態會標示出被複製的格式;若瀏覽器拒絕剪貼簿權限，兩個程式碼區塊仍會保持可見以便手動選取，如此您仍能取得原本會被放到剪貼簿中的相同位元組。
純產生器會獨立拒絕不支援的方向、格式錯誤的顏色、小數，以及超出規定範圍的數值。它不會靜默地限制無效的程式化輸入，也不會輸出部分程式碼，因此不論您重複執行多少次，也不論在哪個瀏覽器分頁中執行，成功執行時複製的輸出就是這四個輸入對應的完整輸出。
顏色、類別名稱與權杖替換
顏色會在被送到輸出前被標準化為小寫，因此 #1A73E8 與 #1a73e8 在複製出的 CSS 中永遠會變成相同的小寫權杖 (token)。如果您之後將字面值替換為設計權杖，例如 CSS 變數，請保持透明的側邊 border 為透明，並確認目的端的語法支援權杖，因為這個聚焦的工具只會產生不透明的 HEX 字面值。Alpha 顏色、CSS 變數、漸層、currentColor、廣色域語法以及主題權杖都不是工具所產生的內容，因此權杖的替換是您在複製之後才需要自行處理的工作。MDN 的 CSS 背景與邊框 指南記錄了側邊 border 所依賴的 transparent 關鍵字，這就是您在替換權杖時必須保留的屬性。
類別名稱是輸出的一部分，也是 CSS 與 HTML 區塊之間的連結。若 lizely-triangle 會與現有的樣式表衝突，請同時在兩段輸出中重新命名;若只在其中一個區塊保留原類別名稱，即使其餘程式碼片段正確，三角形也會在下次渲染時悄悄地失效。
哪些因素會改變重現的結果
輸入並非唯一影響畫面上呈現結果的因素。相同的 CSS 在不同的瀏覽器縮放等級下，可能會以略為不同的繪製尺寸呈現;且即使整數值相同，較高的裝置像素比 (device pixel ratio) 也可能會改變 border 的光柵化方式。強制色彩模式與高對比模式可能會覆寫繪製的顏色，因此需要傳達意義的三角形應該加上可見的文字或可存取的標籤，而不是單獨依賴靜默的 aria-hidden 程式碼片段。
若三角形擺在文字旁邊，請在淺色與深色主題下都加以檢查，而不是預設您所選的 HEX 在兩者中都具有足夠的對比;同時請在 200% 縮放以及常見的行動裝置寬度下檢視最終的元件。工具中的預覽只能確認 border 的幾何，而無法涵蓋目的端元件的完整可存取性或版面配置行為，因此真正的視覺檢查仍然應該在三角形實際所在的真實版面中進行。
若想深入了解，請參閱如何重現從影像取得的平均顏色結果。