How to realize the bubble box effect of voice chat with pure CSS

This paper mainly introduces how to realize the bubble box effect of voice chat with pure css.

Recommended tutorial: CSS tutorial

Voice chat bubble box effect is a very common and popular dialog box effect in our daily life or social networking sites.

For example, the chat interface between WeChat and QQ.

Then for the little whites, it may be difficult to realize this effect. In fact, there are many ways to achieve this voice bubble effect, but we can use the simplest css method to achieve it.

Next, I will introduce you to a simple method to realize the voice bubble effect with pure css.

Example of css code is as follows:

& lt！ DOCTYPE & gt

& lthtml & gt

& ltmeta charset="utf-8 " >

& lthead & gt

< title > examples of realizing voice bubbles by CSS.

& ltstyle type="text/css " >

# Voice Bubble {

Width:120px;

Height: 80px

Background: # 5ac4ed;

Location: absolute;

Left:100px;

-moz-border-radius: 10px；

-WebKit-border-radius: 10px；

Border-radius:10px;

}

# Voice Bubble: Before {

Content: "";

Location: absolute;

Width: 0;

Height: 0;

Border-top: 13px solid color transparent;

Right border: 26px solid color # 5ac4ed;

Border-bottom: 13px solid color transparent;

Security deposit:13px00-25px;

}

& lt/style & gt；

& lt/head & gt；

& ltbody & gt

& ltdiv id="speech-bubble " >& lt/div & gt；

& lt/body & gt；

& lt/html & gt； The effect is as follows:

In the above code, what needs everyone's attention is the realization of the triangle shape in front of the border. The principle of triangle realization is also very simple, just set the width and height of the element to 0 pixels, and then set the border for this element. Here we set the top and bottom borders to 13 pixels for transparent display, and the right border is 26 pixels, with the same color as the right div.

In this way, you can achieve the triangle effect, and you can also achieve the same complete language bubble, and you can set the color size according to your own preferences.

Introduction of related attributes:

The border property allows you to specify the style, width, and color of the border of an element.

The before selector inserts the content before the content of the selected element.

This article is about the effect of using pure css to realize voice chat bubble box, which is also very easy to understand. Hope to help friends in need!