Shulou(Shulou.com)06/01 Report--

Editor to share with you how to use CSS3 to achieve chat bubble effect, I believe that most people do not understand, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

.comment {

Width:150px

Height:35px

Position:relative

Margin:30pxauto0

Background:#f8ac09

Border-radius:5px

}

.comment: after {

Content:''

Width:0

Height:0

Position:absolute

Top:5px

Right:-16px

Border:solid8px

Border-color:transparenttransparenttransparent#f8ac09

Font-size:0

}

We have heard about the implementation of rounded rectangles and triangles. The principle of triangles is that border can be set to transparent, and you can copy the code in the above example to modify the border-color attribute to explore the implementation of triangles.

Note: earlier versions of IE8 did not have very good transparent support for border. You can ignore the low-version bug because most browsers display normally, and if you want to be compatible, set the transparent property as the main background color instead of the bubble background color (provided the background is solid).

As you all know, I'm not going to talk about it here, but let's talk about other ways to achieve it.

The triangular part here can be replaced by a square to achieve the same effect by rotating the small square so that part of it is exposed. The code is as follows

.comment {

Position:relative

Width:150px

Height:35px

Background:#f8ac09

Border-radius:5px

Margin:30pxauto0

}

.comment: after {

Content:''

Position:absolute

Top:10px

Right:-4px

Width:8px

Height:8px

Transform:rotate (45deg)

Background-color:#f8ac09

}

The disadvantage is that the small triangle can only be a right triangle, of course, you can also get a diamond through the transformation and then splice it. If there is too much transformation, there is no first way to do it directly. The browser is compatible with the transform (2D) attribute as follows

The above is all the contents of the article "how to use CSS3 to achieve chat bubble effect". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.