CSS 對話框產生器將一個網路對話框 API 取代為瀏覽器端工具，它能產生純 CSS 的訊息氣泡，並搭配一個三角形的 ::after 尾巴，方法是從一個零尺寸的方框出發，設定三條透明邊框和一條有顏色的邊框，並在即時預覽和複製出來的規則中執行同一套經過驗證的尺寸、顏色、位置和偏移量計算，因此你看到的幾何形狀就是實際部署出去的幾何形狀。
團隊在需要聊天訊息、工具提示或標註指引時，往往會求助於遠端 API，但每一個外部依賴都會增加一把金鑰、一個速率限制、一個網路節點和一個版本鎖定。本機產生器則用「在與網頁同一台機器上執行的輸出」來換掉這些:不需要 API 金鑰，沒有配額，不用上傳，不必建立帳號，也不會為了「一小段邊框、尺寸和定位」這個需求而新增依賴。
產生器會驗證兩個完整的六位數十六進位顏色、一個介於零到八十像素之間的圓角半徑，以及一個介於四到四十像素之間的三角形尾巴尺寸。空白的數值欄位會被拒絕，而不是悄悄被強制轉為零，這代表預覽永遠反映複製出來的規則能夠套用的值，正式版版面也永遠不需要去吸收一個模稜兩可的 border-width 或遺漏的權杖。
為何要用瀏覽器端工具取代對話框 API
對話框端點通常會回傳一個 base64 編碼的 SVG、一張 PNG 素材，或一段以雜湊為鍵的 CSS 字串，而這三種做法各自都帶有瀏覽器內產生器可以消除的摩擦成本。
- 無需 API 金鑰:這個工具不需要權杖、計費關係或配額窗口就能產生該形狀。
- 無網路節點:計算會在同一個事件迴圈中與網頁其他部分一起執行，因此延遲實際上為零，離線模式也能正常運作。
- 無依賴:複製出來的規則只是一小段邊框、尺寸和定位，所以使用它的元件可以保持不依賴任何框架。
- 無資料留存風險:不會上傳、不會記錄，也不會儲存任何東西，當氣泡會包裹使用者產生的內容時，這一點格外重要。
- 無版本漂移問題:幾何形狀會在每次渲染時重新計算，因此使用該元件的專案中發生的權杖或版面異動，不會悄悄破壞來自不同部署的快取氣泡。
這些優點的代價是範圍。本工具專注於一個圓角表面和一個單一的直線指引。客製化偏移、多重指引、曲線尾巴、外框和陰影都刻意被排除在輸出之外，因為每一項都會改變預覽所承諾呈現的幾何形狀。
純 CSS 三角形尾巴是如何計算出來的
這個三角形是 W3C CSS Backgrounds and Borders Level 3 規範中所描述的經典 CSS 邊框技巧:給一個寬高皆為零的方框設定四條實心邊框，將不構成可見邊緣的邊框設為透明，剩下的那條邊框則填上與氣泡相符的顏色。根據 MDN 的 border-style 參考資料，相鄰的邊框會在角落共用一條對角線，正是這一點讓形狀呈現三角形輪廓而不是梯形。
產生器將四個尾巴方向各自對應到同一個範本，而這個對應關係是跨選項唯一會變動的部分:
| 選取的方向 | 可見的投影 | 設為透明的邊框 | 有顏色的邊框 | 位置偏移 |
|---|---|---|---|---|
| 下方 | 在氣泡下方 | 左與右 | 上 | 方框下方，水平置中 |
| 上方 | 在氣泡上方 | 左與右 | 下 | 方框上方，水平置中 |
| 左側 | 在氣泡左邊 | 上與下 | 右 | 方框左邊，垂直置中 |
| 右側 | 在氣泡右邊 | 上與下 | 左 | 方框右邊，垂直置中 |
數值範例解析:一個 14 像素的底部尾巴
選一個底部尾巴，尾巴尺寸設為 14 像素。產生器會將這個數字同時詮釋為氣泡下方的可見投影，以及三角形底邊的一半，因此計算非常直接:
- 上邊框寬度 = 2 × 14 = 28 像素(有顏色的那一半)
- 左邊框寬度 = 14 像素，右邊框寬度 = 14 像素，兩者皆設為透明
- 下邊框寬度 = 0(沒有向下的邊緣，因為指引是朝那個方向投影出去的)
- 偽元素上的 width 和 height = 0
- position: absolute，置於氣泡下方，並設定 left: 50% 搭配 transform: translateX(-50%) 以置中底邊
結果是一個底部寬 28 像素、在氣泡下方突出 14 像素的三角形，因此滑桿上設定的尺寸與指引在版面中所佔用的間距完全一致。
設定顏色、圓角、尾巴尺寸和方向的操作步驟
使用 CSS 對話框產生器，一次就能完成氣泡的撰寫:
- 輸入兩個六位數十六進位顏色:一個氣泡背景色，以及一個在該背景上能產生足夠對比的文字色。
- 設定氣泡圓角表面的圓角半徑(以像素為單位);此欄位接受零到八十像素之間的值。
- 設定三角形尾巴尺寸(以像素為單位)，此值會同時控制可見投影與三角形底邊的一半;此欄位接受四到四十像素之間的值。
- 選擇上、右、下或左，並觀察即時預覽以相符的 border-color 幾何重新繪製。
- 複製為所選方向產生的基礎類別，以及 ::after 偽元素規則。
- 補上輸出刻意留白的元件決策:寬度、內距、字型、max-width、換行、語意、對比和響應式間距。
解讀複製出來的基礎類別與 ::after 規則
輸出包含兩部分:擁有圓角形狀的相對定位基礎類別，以及負責繪製三角形的 ::after 偽元素。基礎類別會取得氣泡背景色、圓角半徑，以及 position: relative，讓偽元素可以錨定到它身上。偽元素本身就是幾何本體，而每一條宣告都明確寫出，確保規則在開發者工具中仍然易讀。
偽元素帶有 content: ''、寬度為零、高度為零，以及一條對每個邊都設定 border-style: solid 的宣告，並在三個不該出現的邊上設為 border-color: transparent，在所選方向對面的那條邊則填上氣泡背景色。明確的宣告正是 W3C CSS Backgrounds and Borders Level 3 規範所要求的，也正是本產生器所輸出的內容 — 不使用任何會隱藏「到底是哪一條邊帶有顏色」的簡寫。
產生器中的預覽會把同一個三角形當成真實的子元素來繪製，因為 inline style 無法指定偽元素。兩條路徑採用的是同一套經過驗證的尺寸、顏色、方向和偏移計算，因此預覽中所看到的，就是複製出來的規則一旦進入樣式表後所產生的結果。
產生器刻意省略的部分
複製出來的規則刻意維持精簡。它不包含內容、內距、寬度、字型、動畫或互動邏輯，因為這些屬於使用該形狀的元件。它也不包含:
- 超出預設 50% 置中之外的指引客製化偏移
- 單一氣泡上的多重指引
- 曲線尾巴
- 氣泡外框
- 氣泡下方的陰影
- 斷詞規則、行高或文字溢位規則
尾巴尺寸刻意上限設為四十像素，因為同一個值同時決定可見投影與三角形底邊的一半，超過這個範圍後，幾何形狀就不再適合用於訊息表面。空白的數值控制項會被拒絕，而不是被轉為零，因此複製出來的規則永遠不會包含一條模稜兩可的宣告。至於陰影層，同樣的「取代 API」模式可透過 Box Shadow Generator API Alternative for Client-Side CSS 這個配套工具來套用，讓該視覺處理同樣留在瀏覽器本地執行。
將氣泡整合進聊天、工具提示和引述中
裝飾性的指引本身並不構成語意關聯，因此意義必須由周圍的 HTML 來承擔。以下三種模式反覆出現:
- 聊天:以文字揭露作者、順序、狀態和時間戳記，而不是單純靠左側或右側擺放位置來暗示發言者。
- 引述:使用段落元素作為內文，並以 cite 或周圍標記處理出處;氣泡僅負責框住內容。
- 工具提示:單靠形狀是不夠的 — 還需要加上觸發關聯、鍵盤可達性、可預測的焦點行為、可按 Esc 關閉，以及與觸發元素之間的無障礙關聯。裝飾性的尾巴絕對不能因為外觀看起來像，就升格為工具提示。
請手動檢查文字顏色與氣泡背景之間的對比。本產生器不會計算 WCAG 比率，因此一個視覺上討喜的氣泡，在常見文字尺寸下仍可能未通過無障礙檢查。過長且不中斷的字串、翻譯後的文字、縮放和狹窄的行動裝置寬度，都可能撐開方框或與尾巴相撞，因此請為正式版元件設定合理的 max-width、換行規則、內距，並在尾巴那一側預留足夠的外部空間。若祖先元素使用了 overflow: hidden，可能會裁切掉指引，請預留空間並檢查每個斷點。
複製完成後，請整合既有的設計權杖，接著測試語意閱讀順序、對比、高對比模式、縮放、本地化、溢位情況，以及實際承載指引的那個容器。50% 的偏移量可以調整成與大頭貼或錨點對齊，而不必更動底層的三角形幾何 — 有顏色的邊框會停留在滑桿設定的位置，變動的只有偽元素上的絕對偏移量。
想進一步了解，請參閱 CSS Stripes Generator Alternative With Hard-Edge Stops。