How to implement chat bubble effect in CSS3? (code example)

The content of this article is to introduce the CSS3 method to cleverly realize the chat bubble effect. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

The revision of the Mobile page that I dared to play a while ago has been completed. The previous page style is flatter, changing from a dark background to a bright background, removing more shadows, and giving users a simple experience style. , haha, I am not a designer, but I will comment too much. Interested friends can go directly to the idarex mobile homepage.

All the styles in this revision are written by orange. I have a lot of feelings. I will share them with you in installments

Now let’s get to the point. Where are the chat bubbles we agreed on?

Traditional Chat Bubble

What is a traditional chat bubble? Directly above the picture

##The code is as follows

<p></p>

<style>
  .comment {
    width: 150px;
    height: 35px;
    position: relative;
    margin: 30px auto 0;
    background: #f8ac09;
    border-radius: 5px;
  }

  .comment:after {
    content: &#39;&#39;;
    width: 0;
    height: 0;
    position: absolute;
    top: 5px;
    right: -16px;
    border: solid 8px;
    border-color: transparent transparent transparent #f8ac09;
    font-size: 0;
  }
</style>

Everyone has heard of the implementation method, such as rounded rectangles and triangles. The principle of triangles is that the border can be set to transparent. You can copy the code in the above example and modify it

border-color to explore the implementation of triangles with attributes.

Note: Earlier versions of IE8 did not have very good support for transparent border. You can ignore the defects of the lower version, because most browsers display normally. If you must be compatible, set the transparent attribute to the main background color instead of the bubble background color (provided that the background is a solid color).

I believe everyone knows it, so I won’t go into details here. Let’s talk about other implementation methods.

The triangular part here can be replaced by a square to achieve the same effect. The method is to rotate 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: 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 a right triangle. Of course, you can also transform it into a diamond shape and then splice it. If there are many transformations, it feels not as direct as the first method. The browser is compatible with transform(2D). The attributes are as follows

# Overall it’s pretty good. You can use it with confidence in several methods and there are no major compatibility issues.

Realistic Case

The design draft here has an extra border, can you directly upload the design draft

? Think about how to deal with it. Let’s review the above

The first method itself is

border transparent. How to set border to it is a problem, let’s not consider it for now. .

If you use small square rotation in the second method, layer overlay is a problem, because the bubble background in the design draft is

rgba(247, 188, 10, 0.03) Let’s take a look at the implementation code first

.comment {
  width: 150px;
  height: 35px;
  position:relative;
  margin: 30px auto 0;
  background-color: rgba(247, 188, 10, 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, 10, 0.03);
  border: 1px solid rgba(252, 185, 8, 0.35);
}

The effect is as follows

##There is a problem with the above idea, because the small square will overlap with part of the bubble, and there will always be problems with the semi-transparent background part. Someone said that you can always be lazy and absorb the transparent background color and then overlay it (because everyone noticed that the overall background of the design draft is a solid color)

If you follow this idea, then the problem here we go again. The two specific questions are as follows.

1. If the small square is superimposed on top, then 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. Compared with the previous picture, the right side of the rounded rectangle is indeed covered. But the border on the left side of the small square shows

. The processing method is this.

.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 that the problem was solved. The effect is as follows

The design draft has

padding

. It is feasible in this case for personal testing, but in line with the principle of seriousnesspadding-right If it is too small, what problems will occur? We add text to p.

<p>Hello,orange.Welcome to FrontEnd World!</p>

The effect is as follows

We found that the lower right corner of the letter o is covered by the left side of the small square, of course it can be passed

z-index

Attribute hack. 2. If the small square is under the rounded rectangle, then the right border of the rounded rectangle will be fully displayed. You can make up your own mind. This solution is unreasonable, but I don’t want to explain too much.

The shortcomings of the above methods are also obvious. So how can we do it more rigorously and not hurt the muscles and bones according to the changes in demand?

We also use the triangle plan! What? Doesn’t it mean that the triangular solution is not feasible?

One triangle is not feasible. As for the two, we have invited

after

's brothers before to appear. The real code of the project is as follows<pre class="brush:php;toolbar:false">.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);   &amp;: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;   }   &amp;: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;   } }</pre> <blockquote>注：这段代码用的是 SASS 进行预编译，如果从头仔细看到这里的话不难理解，两个三角形叠加，大三角形颜色是边框的颜色，小三角形是内部背景色，小三角形绝对定位时向下移 3px 把圆角矩形的一部分上边框遮挡，这样小三角下部也有溢出，具体在两像素之内，实际上不存在遮挡文本问题。</blockquote> <h2 id="总结">总结</h2> <p>实际问题解决的方法很多，就看大家怎么去思考，这个方案也不是最满意的方案，因为多了一个伪元素，主要还是设计思想的多样性，总之 css 很灵活。</p> <p>有人不禁会问，这里设计稿给的是向上的箭头，为什么例子里却都是向右的，这里向右的都是我写的 demo ，理解原理的话，改变个位置方向都是大同小异。</p> <p class="comments-box-content"><br></p>

The above is the detailed content of How to implement chat bubble effect in CSS3? (code example). For more information, please follow other related articles on the PHP Chinese website!