CSS 對話泡泡產生器是一種瀏覽器工具，可將驗證過的顏色、圓角和三角形尾巴尺寸，轉換成可直接複製的類別加上偽元素規則。CSS 對話泡泡產生器接受兩個完整的六位數十六進位顏色、介於 0 到 80 像素之間的圓角，以及介於 4 到 40 像素之間的尾巴尺寸，接著讓你從四個尾巴方向中選擇一個:上、右、下或左。產生的結果是一個相對定位的基礎類別，以及一個絕對定位的 ::after 偽元素，僅透過邊框就能繪製三角形，因此不需要圖片、SVG 或額外的標記。所有運算都在本地進行且具有確定性，不會上傳任何資料，而複製出來的 CSS 刻意省略了內容、內距、寬度、字型與互動邏輯，讓這些職責留給使用該形狀的元件。請將輸出視為一個專注的幾何原型，版面配置、語意、對比和響應式行為則由你自行補充。

css speech bubble generator cheat sheet
CSS 對話泡泡產生器速查表:邊框與尾巴

速查表:輸入與驗證範圍

CSS 對話泡泡產生器刻意保持最小的介面範圍。它會驗證每一個數值控制項，並拒絕不完整或空白的數值，而不是靜默地強制轉型，因此缺少的圓角會被視為拒絕輸入，而不是被轉換為零。下表摘要了產生器接受與拒絕的內容。

控制項格式接受範圍無效輸入時的行為
泡泡背景顏色六位數十六進位 (#RRGGBB)必填，完整數值拒絕，不提供後備值
文字顏色六位數十六進位 (#RRGGBB)必填，完整數值拒絕，不提供後備值
圓角整數像素0 到 80空白輸入會被拒絕，超出範圍會被拒絕
尾巴尺寸整數像素4 到 40空白輸入會被拒絕，超出範圍會被拒絕
尾巴方向單一選擇上、右、下、左始終會選出一個方向;沒有無效狀態

數值範圍刻意設定得很緊。尾巴尺寸低於四像素會小到無法辨識為指向，而超過四十像素的尾巴會主導整個泡泡，而不是作為定位點。圓角上限為八十，因為更大的數值會將泡泡圓化成膠囊形狀，在視覺上與三角形競爭。簡寫十六進位、命名顏色、rgb() 與 hsl() 都被刻意排除在這個專注的顏色輸入之外，這就是為什麼表單每次都要求完整的 #RRGGBB 數值。

四個步驟產生對話泡泡

  1. 選擇泡泡與文字顏色。輸入兩個完整的六位數十六進位數值，例如背景使用 #1e90ff，文字使用 #ffffff。背景顏色同時也是三角形其中一條邊框所使用的顏色，因此指向器在視覺上會與泡泡共享同一個色調。
  2. 設定圓角與三角形尾巴尺寸。圓角會將訊息方塊倒圓;尾巴尺寸則同時控制指向器的可見突出長度，以及三角形底部寬度的一半。圓角請維持在 0–80 px，尾巴請維持在 4–40 px。
  3. 選擇上、右、下或左作為尾巴方向。預覽會立即更新，讓你能即時看到幾何形狀如何與泡泡接合。指向器會置中於所選的那一側，因此預設會落在該邊緣的正中間。
  4. 複製 CSS 並加以擴充。輸出是一個基礎類別加上 ::after 偽元素規則。你仍然需要加上最大寬度、內距、字型、斷字行為，以及任何語意包裝，例如段落、列表項目或聊天室容器。

三角形尾巴如何透過邊框構成

尾巴不是 clip-path、SVG 或圖片。它是一個零寬零高的方框，其邊框本身就是完整的三角形。CSS Backgrounds and Borders 規範定義了當元素沒有內容區時，相鄰邊框如何在 45 度的斜接處相交，而 CSS Backgrounds and Borders Level 3 的 W3C 註記將產生的幾何形狀描述為一個實心三角形加上兩個透明的楔形區塊。border-style 的 MDN 參考資料也確認，任何非隱藏的邊框套用於零尺寸元素時，都會呈現為兩個在中央相交的三角形。

產生器的工作是將你選擇的方向對應到對面的邊框。三個透明邊框加上一個有色邊框就構成了指向器:

  • 底部尾巴:頂部邊框為泡泡顏色;左、右邊框為透明。元素置於泡泡下方，以 left: 50% 水平置中，並使用等於尾巴尺寸一半的負 margin-left。
  • 頂部尾巴:底部邊框為泡泡顏色;左、右、上邊框為透明。元素置於泡泡上方。
  • 右側尾巴:左邊框為泡泡顏色;上、下、右邊框為透明。元素置於右側，以 top: 50% 垂直置中，並加上負 margin-top。
  • 左側尾巴:右邊框為泡泡顏色;上、下、左邊框為透明。

由於相同的大小、顏色、方向和偏移數值會同時套用於兩個路徑，預覽與複製的規則完全一致。產生器會寫入明確的宣告式，讓幾何形狀在瀏覽器的開發者工具中保持可讀性，而你輸入的尾巴尺寸仍然是可見突出長度與置中偏移的唯一真實來源。

複製之後:語意、對比與響應式間距

複製出來的 CSS 是一個專注的幾何原型。它刻意省略了內容、內距、寬度、字型、動畫與互動邏輯，讓這些職責留給使用該泡泡的元件。在正式上線前，請跑過以下簡短的檢查清單:

  • 寬度與換行。設定合理的最大寬度，例如 max-width: 28rem，並讓過長且不中斷的字串透過 overflow-wrap: anywhere 進行換行。否則翻譯後的文字和 URL 可能會將方塊拉伸到遠超過預期的尺寸。
  • 內距與閱讀舒適度。加入 padding: 0.75rem 1rem 或類似的設定，讓文字不會貼在圓角邊緣上。寬鬆的內部間距也能讓尾巴遠離字元。
  • 顏色對比。產生器不會計算對比比例。視覺上討喜的泡泡仍可能難以閱讀，因此請使用 WCAG 2.2 對比檢查工具驗證文字顏色與泡泡背景的對比，目標是針對內文至少達到 4.5:1。
  • 語意包裝。針對引文使用段落、針對聊天訊息使用列表項目，或在互動需求符合時才使用工具提示模式。裝飾性的指向器本身不具備語意，因此關聯性必須由標記承擔。
  • 指向器對齊。50% 的偏移會將尾巴置中於其所在的那一側。如果泡泡是錨定在頭像或圖示上，請將置中偏移替換為明確的數值，讓指向器在視覺上指向正確的位置。

整合你既有的設計權杖、測試語意閱讀順序、驗證相關的鍵盤行為，並檢查實際承載指向器的容器在高對比模式、縮放等級、本地化與溢位方面的表現。

為什麼尾巴在實際版面中會被裁切

有三種模式幾乎涵蓋了所有「我的尾巴不見了」的回報。首先，當祖先元素帶有 overflow: hidden 時，當偽元素延伸超過父元素的內容邊緣就會被裁切，而產生器無法得知這個限制存在。其次，緊密的容器可能在所選的那一側沒有留下外部空間，因此三角形會被渲染到一個根本不存在的外邊距中。第三，狹窄的行動裝置寬度可能將泡泡擠到父元素的邊緣，或與兄弟元素碰撞，而你為桌面所撰寫的響應式斷點可能沒有為指向器保留足夠的外部空間。

請在尾巴那一側預留空間、檢查每一個斷點，並將泡泡移入 overflow: visible 的容器中，或為父元素加上足夠的內邊距以保持偽元素可見。如果版面仍然導致尾巴被裁切，請將尾巴尺寸縮短到允許範圍的下限、稍微降低圓角讓方塊本身佔用更少空間，或切換到空間更充裕的另一個尾巴方向。自訂偏移、多個指向器、弧形尾巴、外框與陰影都被刻意排除在這個專注的輸出之外，因此若需要這些效果，就必須離開產生器，自行手動撰寫幾何程式碼。

對於圓角數值而言，無論你是手動設定或從這個產生器貼上，CSS 的圓角規則都一樣適用，因此在 px 與 % 單位之間抉擇時，請參考圓角像素與百分比及角落順序指南。請開啟 CSS 對話泡泡產生器，鎖定兩個有效的顏色、在範圍內選擇圓角與尾巴、挑選一個方向、複製規則，並以寬度、內距、語意、對比和響應式間距完成元件。產生器提供給你的是一個專注的幾何原型;泡泡的其餘部分由你決定。

如果你正在權衡選項，大量 CSS 條紋產生器:元件用的圖案組合對此有詳細說明。