A simple speech bubble contains a big rectangle or circle text area and an arrow.

Here is A Nice Collection of hand-picked 10 Speech Bubbles with Css code examples.

1.CHAT BUBBLES

Made with

1
2
Html
Css/SCSS

Author

1
Dave Alger

Demo


2.SPEECH BUBBLE

HTML and CSS simple responsive speech bubble.

Made with

1
2
Html
Css/SCSS

Author

1
Rik Schennink

Demo


3.PURE CSS THOUGHT BUBBLES

Made with

1
2
Html
Css/SCSS

Author

1
Grant

Demo


4.RESPONSIVE SPEECH BUBBLE

Box section can change dimensions independently of pointer. Pointer can be moved to different positions around box. Rounded corners. Glow or shadow around the whole thing that changes along with component shapes.

Made with

1
2
Html
Css/SCSS

Author

1
peros

Demo


5.SPEECH BUBBLE CARET

Making a triangle for a speech bubble and using transforms to help create the position.

Made with

1
2
Html
Css/SCSS

Author

1
GRAY GHOST

Demo


6.ALTERNATING SPEECH BUBBLES

Made with

1
2
Html
Css/SCSS

Author

1
Kevin Østerkilde

Demo


7.COMIC BOOK SPEECH BUBBLES WITH SVG

A pattern for creating comic book speech bubbles using SVG.

Made with

1
2
Html
Css/SCSS

Author

1
Dudley Storey

Demo


8.PURE CSS SPEECH AND THOUGHT BUBBLES

Pure CSS thought and speech bubbles that grow to fit the text.

Made with

1
2
Html
Css/SCSS

Author

1
Joe Hastings

Demo


9.CSS SPEECH BUBBLE

Simple speech bubble with CSS.

Made with

1
2
Html
Css/SCSS

Author

1
M.Satrya

Demo


10.COMIC DIRECTOR SPLASH ANIMATION

Comic Director is a Windows 8 app written in HTML and CSS. The first time run experience has a nifty little animation, here’s how we did it.

Made with

1
2
Html
Css/SCSS

Author

1
Adam Argyle

Demo