CSS Implementation Bubble Box effect (example plus diagram) _css/html

Premise: Bubble box or cue box is a very common Web page, there are many ways to achieve it, we used to cut the picture and then through the "positioning" way to locate the corresponding location, but in this way maintenance is very troublesome, such as designers want to change to another one or another color that we only have to cut the picture and so on. Below we learn to use HTML+CSS to achieve this effect!

The following effects:

and

We can analyze the following: To achieve this effect is a rectangle and a small triangle then the triangle can be positioned up, then how do we use CSS to make small triangles?

One: First we look at the CSS border properties, when we put a Div border-color set to different colors, you can see the four edges are rectangular.

<div class= "Demo" ></div>.demo {width:50px;height:50px;border-width:50px;border-style:solid; Border-color: #CCC #00F #933 #0C9;}

As shown in figure:

If we continue to set the width and height of the div to 0, then the four edges will be triangular.

But under the IE6 is the triangle around is the rectangle box: as follows:

The experiment found that when the Div font-size and Line-height are set to 0, the four sides of the Div 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;}

It's clear that we just need a triangle, so all we have to do is set the other three-side colors to be transparent or set to be the same as the background color to make a triangle out of the other three-side color set to transparent, that is, the color of the value of transparent, if the other three-side color with the same page background, Although only a triangle can be seen visually, the color of the other three edges will change as soon as the background color 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;}

But there's a problem under the IE6. IE6 does not support transparent transparent as follows:

But through the experiment found that the Border-style set to dashed, IE6 under the other three sides can be transparent! As follows:

Or the above code is changed as follows:

Now we can simulate a small triangle, then we can use the rectangle and the triangle together to do a demo to achieve the above 2 effects! First we design a rectangular box and then position the small triangle on the rectangular box. The following figure:

The code is as follows:

<div class= "Longen" ><span></span> I am the dragon Grace I am in the Bubble box </div>. 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 dashed; border-color:red Transparent transparent;font-size:0; line-height:0;}

Now the direction of the triangle arrow is solid, and we want the hollow effect, we add a small triangle with the same color as the bubble frame background, and then the superposition of the small triangle to move the position can be achieved.
First you need to adjust the HTML structure, as shown in the following figure

The code is as follows:

Let's take a look at the second kind of irregular effect how to achieve it?

The HTML code is the same as before:

<div class= "Longen" ><div class= "Arrow" ><em></em><span></span></div> I'm a dragon, I'm in the bubble frame </div>

CSS is changed as follows:

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

Reposition the lower triangle Arrow:

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

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

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

Let's first simulate a right triangle, set the color of the adjacent sides of an element to the same value, and the other sides to be transparent to get a right angle: as follows:

The code continues to add the following:

Continue to overlap the two right triangles together to get an irregular triangle code as follows:

To this irregular picture has been made!

The complete code is as follows:

<div class= "Longen" > <div class= "arrow" > <em></em> <span></span> </div> I'm a dragon. </div>.longen {width:300px; height:100px;position:relative background-color:red;margin:50px Auto 0 in the bubble frame; ;}. arrow{position:absolute; width:70px; height:60px; left:-70px; bottom:10px; Arrow *{position:absolute; border-style:dashed solid 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 #FFF Transparent; bottom:0;}

Second: In addition to the setting of elements of the border to simulate the small triangle, you can also use special character simulation, with special characters to simulate the small triangle also needs to use positioning and overlapping coverage, just do not need to adjust the border attribute.

First look at a diamond "", its code in the page is "", you need to note that the page encoding needs to be set to Utf-8, in the Web page can be treated as a word, you can adjust the font-size to its size, color to set its colors.

The HTML code is as follows:

First, set the style of the outermost div, and get a rectangular box:

The code is as follows:

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

Then locate the arrow's outermost container div for easy observation. You can set a background color first:

The code is as follows:

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

To set the style again:

. 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 consistent in the mainstream browser, you need to clear the browser's default font style, pay special attention to the font settings here, and then modify the EM, span label font color, and the two tags positioning: The code is as follows:

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

The final effect diagram is the same as the above:

The complete code is as follows:

<div class= "Longen" > <div class= "arrow" > <em> </em> <span> </span> </div> I'm a dragon. </div> longen{width:300px height:100px;position:relative border:5px solid red margin:50px Auto 0 in the bubble frame. 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;}
Add: The above way to achieve the process of small triangle inevitably added extra tags, if not required in all browsers to display the same, we can use CSS3 to achieve this small triangle. <div class= "Longen" > Css3 Bubble Box </div >.longen{width:300px; height:100px border:5px solid #09F; position:relative; Background-color: #FFF; Longen: before,.longen:after{content: "";d isplay: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; }. longen:after{bottom:-33px Border-color: #FFF transparent transparent;
The effect is the same as above. I also through Google's own research under the demo does not really good so to share out if the analysis of the unclear please you Daniel! My ability temporarily limited!!