一個以單一偽元素三角形為核心所打造的 CSS 對話泡泡產生器替代方案,能讓你無需圖片、SVG 素材或額外的 DOM 節點,就獲得圓角訊息表面與指向性尾端——只需要一個相對定位的基礎類別,以及一個絕對定位的 ::after 規則,繪製出一個零尺寸的方框,並讓其中對側的邊框套用泡泡顏色。這種輸出背後的技術已有數十年歷史:一個寬度為零、高度為零的方框內容是看不見的,但它的四條邊框會沿對角線相接,因此只要在其中一條邊框上色、其餘三條保持透明,就能產生一個乾淨的三角形。CSS Speech Bubble Generator 把這個幾何技巧包進一個小巧且專注的介面,會驗證兩個六位數顏色、一個有限的圓角半徑與一個有限的尾端大小,然後把結果序列化為可複製的規則。由於每個數值都在本地端檢查,且計算是確定性的,相同的輸入永遠會產生相同的宣告,讓這條規則在瀏覽器開發者工具中易於檢視,而不是被當成無法理解的黑盒片段。
這個替代方案的不同之處
許多對話泡泡工具依賴以下三種做法之一:匯出 PNG、手寫 SVG 路徑,或是會注入自家標記與樣式的程式庫。這些方式各有代價。PNG 會多出一個需要管理的素材與一個必須失效化的快取;SVG 雖然靈活,但需要編輯器,並增加 DOM 重量;程式庫則打包了較小專案不需要的功能——陰影、漸層、外框、多重尾端——而且常把視覺形狀與消費者根本沒要求的互動邏輯綁在一起。
CSS Speech Bubble Generator 走的是另一條路。它只輸出泡泡與尾端,以單一類別加上單一偽元素來表示,並把其他所有事情——內容、內距、寬度、字體排版、動畫與行為——留給承載這個形狀的元件。這種專注就是它的替代切入點:你得到的不是一個包山包海的小工具,而是一段可讀、可審核、能直接整合進既有設計系統的確定性幾何宣告,不必再理清多餘的規則。當你需要偽元素三角形、通過驗證的輸入,以及一條在瀏覽器開發者工具中經得起檢視的可複製規則時,請使用 CSS Speech Bubble Generator。
逐步建立對話泡泡
請依照下列步驟,用 CSS Speech Bubble Generator 產出可複製的規則:
- 使用完整的六位數十六進位值(例如 #2563EB 與 #FFFFFF)來選擇泡泡顏色與文字顏色;產生器會驗證這兩個輸入,並拒絕任何不是完整十六進位字串的值。
- 把圓角半徑設在 0 到 80 像素之間,三角形尾端大小設在 4 到 40 像素之間;驅動預覽的同一個數值引擎也會驅動複製出來的規則。
- 從四種尾端方向——上、右、下、左——中選擇一種,即時預覽會重新繪製幾何形狀;由於 inline 樣式無法指定偽元素,預覽會換上一個真實的子元素來呈現,而複製出來的規則則表達實際上線的形式。
- 當預覽符合你需要時,複製該類別與 ::after 宣告。
- 把規則貼進你的樣式表,並補上元件本身需要的內容、內距、最大寬度、換行行為與響應式間距。
解讀產生的 CSS 規則
輸出包含一個套用在泡泡元素上的基礎類別,以及一條 ::after 偽元素規則。基礎類別會設定 position: relative、background-color、color 與 border-radius;padding 刻意留給複製後的取用元件自行補上。::after 規則則設定 content、position: absolute,以及一個零尺寸的方框,讓它的邊框構成尾端。由於幾何完全由一個偽元素負責,你不需要在泡泡中加入任何額外標記——三角形完全由 CSS 繪製,這也是這條規則易於審核的原因。
尾端大小一次決定兩個測量值:泡泡邊緣外的可見突出長度,以及三角形底邊的一半。尾端大小為 20 像素時,會產生 20 px 的突出與 40 px 的底邊;尾端大小為 32 像素時,則產生 32 px 的突出與 64 px 的底邊。上色的邊框取決於所選邊,其餘三條邊框保持透明,只讓一個三角形可見。下表整理了產生器實際套用的對應關係,這遵循 MDN 的 border-style 參考文件以及 W3C CSS Backgrounds and Borders Level 3 規範所記載的標準 border-triangle 技巧。
| 尾端方向 | 上色邊框 | 透明邊框 | 放置位置 | 置中軸 |
|---|---|---|---|---|
| 上 | 下 | 左、右、上 | 方框上方 | 水平 |
| 右 | 左 | 上、下、右 | 方框右側 | 垂直 |
| 下 | 上 | 左、右、下 | 方框下方 | 水平 |
| 左 | 右 | 上、下、左 | 方框左側 | 垂直 |
偽元素會沿所選邊置中,因此上下尾端以 50% left 搭配負值 top 偏移來對齊,左右尾端則以 50% top 搭配垂直軸上的負值偏移來對齊。如果指標應該對齊頭像或按鈕,而不是泡泡的幾何中心,請在複製後調整 50% 的位置——產生器刻意不開放自訂偏移。
輸入上限與驗證行為
產生器強制採用狹窄且可預期的範圍。圓角半徑接受 0 到 80 像素;尾端大小接受 4 到 40 像素。尾端的最小值是為了讓三角形在一般縮放下仍清晰可讀,最大值則是讓幾何維持在合理的版面比例之內。顏色必須是完整的六位數十六進位值,因此像 #FFF 或 #0000 這類簡寫會被拒絕;只有完整長格式才能通過驗證。空白的數值控制項會被拒絕,而不會被轉為 0,因此當某個欄位留空時,預覽不會悄悄渲染出一個完全平邊的泡泡或零尺寸的尾端。
所有計算都在本地端以確定性方式進行。不會上傳或保留任何資料、不需要帳號、也不會引入新的相依套件。如果你需要把得到的像素值轉換到 rem 為基礎的設計系統,像是 PX to REM Converter 這類工具,可以在你確定根字級大小後,把圓角與尾端大小轉成 rem。
產生器刻意不處理的項目
輸出刻意保持精簡。產生器只寫出幾何,其他一律不處理,因此複製出來的規則省略了內容、內距、寬度、字體排版、動畫與互動邏輯——這些屬於承載該形狀的元件,而不是視覺基本元件的職責。自訂偏移、多重指標、曲線尾端、外框與陰影同樣刻意落在這個聚焦範圍之外。如果你需要這些效果,請在複製後自行疉加上去,而不是期待產生器預先幫你準備好。
這個範疇正是它的替代價值:你複製到的規則,就是你檢視到的規則。沒有隱藏狀態、沒有 Shadow DOM,也沒有需要記住的額外外層,因此把泡泡整合進既有樣式表,只需要貼上兩條宣告,而不是去反向工程整個套件。當專案需要為重點訊息準備更具裝飾性的表面時,請在自家樣式表中把泡泡與後續效果組合起來,而不是期待這個基本元件幫你預先設想。
裝飾性指標不再足夠之處
裝飾性指標無法建立語意關聯。如果泡泡代表的是聊天訊息,請用文字揭露作者、順序、狀態與時間戳記,而不是只靠左右位置。引用訊息請用段落、聊天條目請用清單項目,而工具提示模式只有在滿足其互動與無障礙需求時才適合使用。有尾端的形狀不會因為有尾端就成了工具提示——互動式工具提示需要鍵盤可達性、可預期的關閉行為、焦點行為,以及與觸發元素的無障礙關聯。
上線前,請檢查文字與所選背景之間的對比;產生器不會計算 WCAG 比值,因此視覺上漂亮的泡泡仍可能難以閱讀。長長未斷行的字串、翻譯後的文字、縮放與狹窄的手機寬度,都可能讓方框擴張或與尾端碰撞,因此請為實際元件設定合理的最大寬度、換行規則、內距,並在尾端那一側保留足夠的外側空間。如果泡泡位於 overflow-hidden 的父元素中,指標可能會被裁切——請預留空間並檢查每個響應式中斷點。複製之後,請整合既有的設計權杖、測試語意閱讀順序、相關時的鍵盤行為、對比、高對比模式、縮放、本地化、溢位,以及將承載該指標的實際容器。
如果你正在權衡選項,CSS Stripe Pattern: Build It With Repeating Gradients 對此有詳細說明。
如果你正在權衡選項,CSS Glass Effect: Backdrop Filter, Alpha, and Border Right 對此有詳細說明。