跳至主要內容
Lizely

CSS 語氣泡泡生成器

建立一個經驗證顏色、半徑、尾部大小及四個尾部方向的 CSS 語氣泡泡，然後複製完整的偽元素規則。

隱私權：你的檔案不會離開裝置，所有處理均在瀏覽器本機完成。

使用方式

  1. 1.選擇泡泡與文字顏色。
  2. 2.設定圓角半徑與三角形尾部大小。
  3. 3.選擇上方、右方、下方或左方並檢視預覽。
  4. 4.複製 CSS 並加入內容排版、語意、對比度與響應式間距。

關於CSS 語氣泡泡生成器

CSS 對話框產生器不需要圖片或 SVG 素材，即可建立圓角訊息框和三角形指標。請選擇對話框與文字色彩、圓角半徑、尾端大小，以及四個尾端方向之一。結果包含採相對定位的基礎類別，以及採絕對定位的 ::after 偽元素。由於行內樣式無法指定偽元素，即時預覽會使用實際的子元素繪製相同的邊框三角形，而複製的規則則呈現正式環境所用的形式。兩種方式都採用相同且經驗證的大小、色彩、方向與偏移量計算。

三角形技巧是以一個零寬度、零高度的方塊為起點。相鄰的邊框使用透明色彩，與所選邊相反的邊框則使用氣泡色彩。若為底部尾端，則左邊與右邊邊框為透明，頂邊邊框為色彩；元素會置於方塊下方並水平居中。頂部則會反轉色彩邊框。左邊與右邊尾端則使用透明頂邊與底邊邊框，並垂直居中。產生器會明確寫出宣告，使在開發者工具中檢視時，幾何結構仍能清楚理解。

尾部大小同時控制可見投影與三角形底邊的一半。限制為實際可行的四至四十像素。圓角半徑接受零至八十像素。顏色必須為完整的六位十六進位值，空的數值控制元件將被拒絕，而非轉為零。尾部會居中於所選邊上；自訂偏移、多個指標、曲線尾部、邊框、陰影等功能均不在本輸出範疇內。複製後，若指標需與頭像或錨點對齊，請調整五十百分比位置。

裝飾性指標不會建立語意關係。請使用適當的 HTML 來呈現內容：引語使用段落，訊息使用清單項目，僅在確認互動與可訪問性需求皆符合時才使用提示模式。僅因加上尾部就將產生的框轉為提示，是不正確的。互動提示必須具備鍵盤可達性、可預測的關閉行為、焦點行為，以及與觸發元素的可訪問性關聯。聊天訊息應在文字中顯示作者、順序、狀態與時間戳，而非僅依賴左或右的擺放位置。

檢查文字與所選背景之間的對比度。生成器不會計算 WCAG 比值，視覺上悅目且仍可能無法閱讀。長段連續文字、翻譯內容、縮放、以及窄幅行動裝置寬度可能擴大泡泡或導致尾部碰撞。應為產出元件設定合理的最大寬度、換行規則、邊距，並在尾部側留出足夠空間。若泡泡位於 overflow-hidden 的父元素內，指標可能被裁切。應預留空間並檢視每一響應斷點。

所有計算皆在本機執行且結果可預測。不會上傳任何內容，亦不會保留資料，無需帳號，也無新增依賴。複製的 CSS 故意不包含內容、邊距、寬度、字型、動畫與互動邏輯，因為這些屬於使用該形狀的元件本身。複製後，應整合現有標記，測試語意閱讀順序、相關的鍵盤行為、對比度、高對比模式、縮放、本機化、溢位以及將要容納指標的精確容器。

方法與來源

驗證兩組六位數的顏色、有限半徑與尾端範圍，將每一個選取邊緣對應至對面顏色的邊框，並序列化一個零大小的 CSS 三角形，以中心絕對定位呈現，同時預覽相同的幾何結構。

常見問題

為何複製的規則使用 ::after？
一個偽元素可讓三角形出現，且無需額外的標籤標記。預覽僅使用子元素，以便以內聯樣式呈現相同的幾何結構。
這是否可以用來作為可訪問的提示框？
僅有形狀本身並非提示框的實作方式。需加入觸發關聯、鍵盤操作、焦點與關閉行為，以及適當的語義標記。
為何我的佈局中三角形的尾端被裁剪了？
父元素可能使用了隱藏溢位，或提供過於狹窄的外層空間。請檢查包含的區塊，並為選擇的邊緣保留適當空間。

相關工具

開發者工具 使用指南

查看全部