How to use pure CSS to realize the effect of voice chat about weather bubble box
This article mainly shows you "how to use pure CSS to achieve voice chat bubble box effect", the content is simple and easy to understand, organized clearly, I hope to help you solve doubts, let Xiaobian lead you to study and learn "how to use pure CSS to achieve voice chat bubble box effect" this article bar.
An example CSS code is as follows:
CSS implementation of voice bubbles example
#speech-bubble{
width:120px;
height:80px;
background:#5ac4ed;
position:absolute;
left:100px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}
#speech-bubble:before{
content:"";
position:absolute;
width:0;
height:0;
border-top:13pxsolidtransparent;
border-right:26pxsolid#5ac4ed;
border-bottom:13pxsolidtransparent;
margin:13px00-25px;
}
In the above code, what you need to pay attention to is the implementation of the triangle shape in front of the border. The principle of triangle implementation 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 upper and lower borders to 13 pixels and transparent display, the right border to 26 pixels, color and right div color consistent.
In this way, triangle effect can be achieved, the same complete language bubble can be achieved, and the color size can be set according to your own preferences.
Description of related attributes:
The border attribute allows you to specify the style, width, and color of an element's border.
The:before selector inserts content before the content of the selected element.
The above is "how to use pure CSS to achieve voice chat bubble box effect" all the content of this article, thank you for reading! I believe that everyone has a certain understanding, hope to share the content to help everyone, if you still want to learn more knowledge, welcome to pay attention to the industry information channel!
