Css to implement the bubble box effect (example and illustration) _ CSS/HTML

Css implements the bubble box effect. Many JS frameworks on the internet provide this function. To learn this effect, we use CSS to write a bubble effect. Premise: the bubble box or prompt box is very common for Web pages. There are many ways to implement it. The most common method we used previously was to cut the image and then locate the corresponding position through the "positioning" method, however, maintenance in this way is very troublesome. For example, if a designer wants to change to another color or another color, we only need to cut the image again. Next we will learn how to use html + css to achieve this effect!

The following results:

And

We can analyze it as follows: To achieve this effect, there is nothing more than a rectangle and a small triangle, and then the triangle can be positioned. How can we create a small triangle through css?

I. First, let's take a look at the css border attribute. When we set a p border-color to a different color, we can see that the four sides have become rectangles.

.demo {width:50px;height:50px;border-width:50px;border-style:solid;border-color:#CCC #00F #933 #0C9;}

If we continue to set the width and height of p to 0, the four sides will become triangles.

.demo{width:0; height:0; border-width:50px; border-style:solid; border-color:#CCC #00F #933 #0C9;} 

However, in IE6, the upper and lower sides are triangles and the left and right sides are rectangular boxes:

Experiments show that when the font-size and line-height of p are set to 0, the four sides of p can form a perfect triangle under IE6: the code is as follows:

.demo{width:0; height:0; border-width:50px; border-style:solid; border-color:#CCC #00F #933 #0C9;line-height:0;font-size:0;}

We understand that we only need one triangle, so we only need to set the other three sides of the color to transparent or set it to the same as the background color to make a triangle, set the other three-sided colors to transparent, that is, the color value is transparent. If the other three-sided colors are the same as the page background, although only one triangle can be seen visually, once the background color changes, the color of the other three sides also changes. The following code:

.demo{width:0; height:0; border-width:50px; border-style:solid; border-color:#CCC transparent transparent transparent;line-height:0;font-size:0;}

However, IE6 does not support transparent as follows:

However, after we set border-style to dashed, the other three sides of IE6 will be transparent! As follows:

Or the above Code is changed to the following:

.demo{width:0; height:0; border-width:50px; border-style:solid dashed dashed dashed; border-color:#CCC transparent transparent transparent;line-height:0;font-size:0;} 

Now we can simulate a small triangle, so we can use the rectangle and the triangle together to create a demo to achieve the above two effects! First, we first design a rectangle frame and then place the small triangle into the rectangle frame. For example:

The Code is as follows:

I'm long. I'm in the bubble box.
. Longen {position: relative; width: 300px; height: 100px; border: 5px solid red ;}. longen span {position: absolute; left: 100px; bottom:-40px; border-width: 20px; border-style: solid dashed; border-color: red transparent; font-size: 0; line-height: 0 ;}

Now the triangle arrow in the direction is solid, and what we want is a hollow effect. We then add a small triangle with the same background color as the bubble box, then we can move the stacked triangle to the position.
First, adjust the HTML structure, as shown in figure

The Code is as follows:

  I'm long. I'm in the bubble box.
. Longen {position: relative; width: 300px; height: 100px; border: 5px solid red ;}. longen span {position: absolute; left: 100px; bottom:-40px; border-width: 20px; border-style: solid dashed; border-color: red transparent; font-size: 0; line-height: 0 ;}. longen em {position: absolute; bottom:-34px; left: 100px; border-width: 20px; border-style: solid dashed; border-color: # FFF transparent; font-size: 0; line-height: 0 ;}

Next, let's take a look at how to implement the second irregular effect?

The HTML code is the same as the previous one:

I'm long. I'm in the bubble box.

Change css to the following:

.longen {width:300px; height:100px;position:relative; background-color:red;margin:50px auto 0;}

Reposition the lower Arrow:

.arrow{ position:absolute; width:70px; height:60px; left:-70px; bottom:10px;}

The value of border-style on the adjacent sides of the element is set to solid (displayed), and the value of border-style on the other side is set to transparent (not displayed)

.arrow *{position:absolute; border-style:dashed solid solid dashed; font-size:0; line-height:0; }

Next, we first simulate a right triangle, and set the color of the adjacent sides of an element to the same value, and set the color of the other sides to transparent. Then we can get a right angle:

Add the following code:

.arrow em{border-color:transparent #09F #09F transparent; border-width:30px 35px;} 

The code for an irregular triangle is as follows:

.arrow span{ border-width:20px 35px;border-color:transparent #FFF #FFF transparent; bottom:0;} 

The irregular image has been created!

The complete code is as follows:

 
   
I'm long. I'm in the bubble box.
. Longen {width: 300px; height: 100px; position: relative; background-color: red; margin: 50px auto 0 ;}. arrow {position: absolute; width: 70px; height: 60px; left:-70px; bottom: 10px ;}. arrow * {position: absolute; border-style: dashed solid dashed; font-size: 0; line-height: 0 ;}. arrow em {border-color: transparent # 09F # 09F transparent; border-width: 30px 35px ;}. arrow span {border-width: 20px 35px; border-color: transparent # FFF transparent; bottom: 0 ;}

2: In addition to setting the border of an element to simulate a small triangle, you can also use special characters to simulate it. Using special characters to simulate a small triangle also requires positioning and overlapping coverage, however, you do not need to adjust the border attribute.

First, let's look at a diamond "◆". Its code on the page is "◆". Note that the page encoding needs to be set to UTF-8. On the webpage, you can treat ◆ as text, you can adjust font-size to set its size and color.

The hTML code is as follows:

 
 ◆◆
I'm long. I'm in the bubble box.
 

First, set the style of the outermost p to get a rectangular box:

The Code is as follows:

.longen{ width:300px; height:100px;position:relative; border:5px solid red; margin:50px auto 0;}

Next, locate the outermost container p of the arrow to set a background color for observation:

The Code is as follows:

.arrow{ position:absolute; width:40px; height:40px; left:100px; bottom:-40px; background:#ccc;overflow:hidden;}

Set the style for ◆:

.arrow *{position:absolute; font-size:40px; line-height:40px; width:40px; font-family:SimSun; font-style:normal; font-weight:normal; text-align:center; vertical-align:middle;}

The figure is as follows:

Note: In order to display consistency in mainstream browsers, you need to clear the default font style of the browser. Pay special attention to the font settings and then modify the font color of the em and span labels respectively, and locate the two labels: the code is as follows:

.arrow em{ color:red; top:-15px;}.arrow span{ color:#fff; top:-21px;}

The final result is as follows:

The complete code is as follows:

 
 ◆◆
I'm long. I'm in the bubble box.
. Longen {width: 300px; height: 100px; position: relative; border: 5px solid red; margin: 50px auto 0 ;}. arrow {position: absolute; width: 40px; height: 40px; left: 100px; bottom:-40px; overflow: hidden ;}. arrow * {position: absolute; font-size: 40px; line-height: 40px; width: 40px; font-family: SimSun; font-style: normal; font-weight: normal; text-align: center; vertical-align: middle ;}. arrow em {color: red; top:-15px ;}. arrow span {color: # fff; top:-21px ;}
Supplement: Unnecessary labels are inevitably added in the Process of small triangle implementation in the above method. If it is not required to be consistent in all browsers, we can use css3 to implement this small triangle.
Css3 bubble box
. Longen {width: 300px; height: 100px; border: 5px solid # 09F; position: relative; background-color: # FFF ;}. longen: before ,. longen: after {content: ""; display: block; border-width: 20px; position: absolute; bottom:-40px; left: 100px; border-style: solid dashed; border-color: # 09F transparent; font-size: 0; line-height: 0 ;}. longen: after {bottom:-33px; border-color: # FFF transparent ;}
The effect is the same as above. I also did a good demo through google's own research, so I shared it. If the analysis is unclear, please kindly advise! My capabilities are limited !!