CSS3 cleverly implement chat bubbles

Traditional chat Bubbles

What is the traditional chat bubble, directly

The code is as follows

Implementation of the way we have heard, rounded rectangles and triangles, the principle of the triangle is border can be set to transparent, you can copy the code in the above example to modify the Border-color property to explore the implementation of the triangle.

Presumably we all know, here do not repeat, talk about other methods of implementation.

The triangular section here can be replaced with squares to achieve the same effect by rotating small squares to make a part of it open. The code is as follows

. comment {  position:relative;  width:150px;  height:35px;  Background: #f8ac09;  border-radius:5px;  margin:30px auto 0;}. 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 right triangle, of course, can also be transformed to get the diamond and then splicing, change more feel no first way directly, browser compatible transform (2D) attributes are as follows

Overall also good, several methods can be assured use, there is no big compatibility problem.

Real case

The design manuscript here has one more border, directly on the design draft

️ think about how to deal with it, we look back above

The first way itself is border transparent, how to set it border is a problem, for the moment not to consider.

The second way, if you use a small square rotation, the hierarchy overlay is a problem, because the bubble background in the design is RGBA (247, 188, 10, 0.03) first look at the implementation code

. comment {  width:150px;  height:35px;  position:relative;  margin:30px Auto 0;  Background-color:rgba (247, 188, ten, 0.03);  border:1px Solid Rgba (252, 185, 8, 0.35);  border-radius:5px;}. Comment:after {  content: ';  width:8px;  height:8px;  Position:absolute;  top:10px;  Right: -4px;  Transform:rotate (45deg);  Background-color:rgba (247, 188, ten, 0.03);  border:1px Solid Rgba (252, 185, 8, 0.35);}

The effect is as follows

The above idea has the problem, because the small square and the bubble part will coincide, the translucent background part always appears the question, some people said steals a lazy always can, the transparent background color draws out then carries on the superposition (because everybody notices the design draft's overall background is the solid color)

According to this idea to achieve, then the problem comes again. Two specific questions are as follows.

1. If the small square is superimposed on it, the border of the left half of the small square will be displayed

. comment {  width:150px;  height:35px;  position:relative;  margin:30px Auto 0;  Background-color: #faf8f3;  border:1px solid #fbe2a0;  border-radius:5px;}. Comment:after {  content: ';  width:8px;  height:8px;  Position:absolute;  top:10px;  Right: -4px;  Transform:rotate (45deg);  Background-color: #faf8f3;  border:1px solid #fbe2a0;}

The effect is as follows, the right side of the rounded rectangle of the previous picture is actually obscured, but the border on the left side of the small square is displayed.

The way it is handled, it can be.

. comment:after {  content: ';  width:8px;  height:8px;  Position:absolute;  top:10px;  Right: -5px;  Transform:rotate (45deg);  Background-color: #faf8f3;  border:1px #fbe2a0;  Border-style:solid solid None none;}

We found the problem solved. The effect is as follows

Design draft is padding, pro-test the case is feasible, but the principle of serious padding-right if too small, what problems will arise?

We add text to the Div.

Hello,orange. Welcome to FrontEnd world!

The effect is as follows

We find that the lower right corner of the letter o is covered by the left side of the small square, which can of course be hack by the Z-index property.

2. If the small square in the corner rectangle, then the rounded rectangle to the right of the box will be full display, we have to fill the brain, this scheme is unreasonable, but many explanations.

The above method shortcomings are also very obvious, that how to be more rigorous, according to the needs of the changes do not hurt your bones?

We also use a triangular scheme! What? Not that the triangle plan is not okay?

A triangle is not to be done the two, we invite after the brother before appearance. The actual code for the project is as follows

. reply {  position:relative;  Margin:0.672rem 0 0.096rem 0;  Padding:0.408rem 0.816rem;  border:1px Solid Rgba (#fcb908, 0.35);  Border-radius:0.2rem;  Background-color:rgba (#f7bc0a, 0.03);  &:after {    content: ';    width:0px;    height:0px;    Border-color:  transparent transparent #faf8f3 transparent;    Border-style:solid;    border-width:6px;    Position:absolute;    Top: -11px;    border-radius:3px;    left:18px;    Right:auto;  }  &:before {    content: ';    width:0px;    height:0px;    Border-color:transparent Transparent Rgba (#fcb908, 0.35) transparent;    Border-style:solid;    border-width:7px;    Position:absolute;    Top: -14px;    border-radius:3px;    left:17px;    Right:auto;}  }

Summarize

Practical problems to solve a lot of ways to see how we think, this program is not the most satisfactory solution, because more than a pseudo-element, mainly is the diversity of design ideas, in short, CSS is very flexible.

