Detailed use of CSS bubble box implementation method

A bubble box (or balloon) is a common element in a Web page that is mostly used to show a hint, as shown in:

Split to see, shaped like this bubble box is a rectangular box + a direction of the triangular small arrow, to make such a bubble box, if the triangle small arrow is easy to solve. One way is to make a picture of such a triangular arrow, and then position it on a rectangular box. However, this workaround can be inconvenient to change the bubble box at a later time, and it is possible to re-create a small triangular icon for each bubble box modification. If we can directly use HTML and CSS code to implement such a triangular small arrow everything is solved.

1, the width of the div and height are set to 0, the four sides are formed triangles.

# test{width:0, height:0, border-width:75px, border-style:solid border-color: #09F #990 #933 #0C9;}

2, in the mainstream browser detection, found that there is a small problem in the IE6, the upper and lower sides can form a triangle, left and right are still trapezoidal.

Solution: The div font-size and Line-height are set to 0, at this time, the four sides of the div in the IE6 can form a perfect triangle.

#test {width:0; height:0; border-width:75px; border-style:solid border-color: #09F #990 #933 #0C9; font-size:0; line-height:0;}

3, we only need one of the triangles, then only need to set the other three-side color to be transparent or the same color as the page background, you can simulate a triangle, it is recommended to set the other three-side color is transparent, that is, the value of color is transparent, If the other three-side color is the same as the page background, you can visually see only one triangle, but once the background color changes, the other three-side colors change as well.

#test {width:0; height:0; border-width:75px; border-style:solid; Border-color: #09F transparenttransparent; font-size : 0; line-height:0;}

4, under IE6 transparent invalid, the other three sides are set to the default black.

Solution: After setting the Border-style to dashed, the other three sides of the IE6 can be transparent.

5, to this step we have successfully simulated a small triangle, the next step we put this small triangle with a rectangular box together. First, set a rectangle, and then position the small triangle on the rectangular box. To write the HTML structure first:

<div class= "Tag" >

<em></em>

CSS Bubble Box implementation

</div>

. tag{width:300px; height:100px; border:5px solid #09F; position:relative;}

. tag Em{display:block; border-width:20px; position:absolute; bottom:-40px; Left:100px;border-style:solid Dashed Dashed; Border-color: #09F Transparent transparent;font-size:0; line-height:0;}

6.

Now indicates the direction of the triangle arrow is solid, and we want to be a hollow effect, here we overlay a bubble box background color of the same small triangle, and then the superimposed small triangle moved a position can be achieved.
The HTML structure needs to be adjusted first, as follows:

<div class= "Tag" >

<em></em>

<span></span>

CSS Bubble Box implementation

</div>

CSS Styles modified to:

. tag{width:300px; height:100px; border:5px solid #09F; position:relative; Background-color: #FFF;}

. tag Em{display:block; border-width:20px; position:absolute; bottom:-40px; Left:100px;border-style:solid Dashed Dashed; Border-color: #09F Transparent transparent;font-size:0; line-height:0;}

. tag Span{display:block; border-width:20px; position:absolute; bottom:-33px; Left:100px;border-style:solid Dashed Dashed; Border-color: #FFF Transparent transparent;font-size:0; line-height:0;}

Note: The bottom value of the superimposed small triangle span is not the value of border-width, and the difference between the two small triangular bottom should theoretically be the square root of 2 (border-width) 2.

Finally, optimize the code to make it easier to maintain in the later stages, complete HTML structure:

<div class= "Tag" >

<div class= "Arrow" >

<em></em><span></span>

</div>

CSS Bubble Box implementation

</div>

CSS Styles modified to:

. tag{width:300px; height:100px; border:5px solid #09F; position:relative; Background-color: #FFF;}

. arrow{Position:absolute; width:40px; height:40px; bottom:-40px; left:100px;}

. Arrow *{Display:block; border-width:20px; position:absolute; border-style:solid dashed dasheddashed; font-size:0; line-height:0; }

. Arrow Em{border-color: #09F transparent transparent;}

. Arrow Span{border-color: #FFF transparent transparent; top:-7px;}