Progressive enhancement: pure CSS chat bubbles [css3]

Chat bubbles are a form of UI representation that is favored by the masses of netizens. However, many tutorials always need to use non-semantic HTML or JavaScript to implement it. In this tutorial, you only need to use css2.1 to build various chat bubbles and use css3 to enhance the effect. Do not use images, JavaScript, or HTML that is useless in the current syntax.
There are a lotCodeYou can easily understand the code. (TRANSLATOR: when translating, The author asks the demo page to use the original website, so these annotations are not translated. Of course, after reading this article, you will understand the implementation method clearly, you can also understand the code without reading the annotations .)

View Demo: pure CSS chat bubbles

Original article:Http://nicolasgallagher.com/progressive-enhancement-pure-css-speech-bubbles/