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

Html
Css/SCSS

Author

Dave Alger

Demo

2.SPEECH BUBBLE

HTML and CSS simple responsive speech bubble.

Made with

Html
Css/SCSS

Author

Rik Schennink

Demo

3.PURE CSS THOUGHT BUBBLES

Made with

Html
Css/SCSS

Author

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

Html
Css/SCSS

Author

peros

Demo

5.SPEECH BUBBLE CARET

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

Made with

Html
Css/SCSS

Author

GRAY GHOST

Demo

6.ALTERNATING SPEECH BUBBLES

Made with

Html
Css/SCSS

Author

Kevin Østerkilde

Demo

7.COMIC BOOK SPEECH BUBBLES WITH SVG

A pattern for creating comic book speech bubbles using SVG.

Made with

Html
Css/SCSS

Author

Dudley Storey

Demo

8.PURE CSS SPEECH AND THOUGHT BUBBLES

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

Made with

Html
Css/SCSS

Author

Joe Hastings

Demo

9.CSS SPEECH BUBBLE

Simple speech bubble with CSS.

Made with

Html
Css/SCSS

Author

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

Html
Css/SCSS

Author

Adam Argyle

Demo