Create a bubble prompt box with pure CSS

To create a bubble prompt box, if it is easy to use the css3 feature, you can also use images, but the former has compatibility problems (many hard-pressed users are still using low-level browsers, I really hope you are not one of them). The latter is not flexible enough. You can use the image as an example to see how jquery creates a vertical navigation that pops up on the side.

Is there a convenient, compatible, and friendly bubble prompt box? The answer is yes, and it is implemented with pure CSS. Of course, you have the right to doubt this matter before it works out, but after it works out, you must firmly understand: the landlord is an honest man, and his family members do not speak greetings. In fact, this method was previously added to another blog. Now, to make it easier for more friends to use it, share it with the blog. Whether you can use it or not, I would like to thank you for taking the time to come to my article.

First, we will define a set of CSS styles to describe the style of the bubble box. Here there are four situations where the arrows are in the top, right, bottom, and left. The CSS code is as follows:

. Bubble-box {
Background: # Eee;
Width: 200px;
Margin-bottom: 30px;
}

. Bubble-box. Wrap {
Background: # Eee;
/* Modify IE6 */
_ Position: relative;
_ Z-index: 10;
}

/* Arrow-effect */
. Arrow-left {border-left: 20px solid # FFF; border-top: 20px solid # Eee; margin-top: 20px ;}
. Arrow-right {border-Right: 20px solid # FFF; border-top: 20px solid # Eee ;}
. Arrow-top {border-left: 20px solid # Eee; border-top: 20px solid # FFF; margin-left: 20px ;}
. Arrow-bottom {border-left: 20px solid # Eee; border-bottom: 20px solid # FFF; margin-left: 20px ;}

. Arrow-left. Wrap,
. Arrow-Right. Wrap {
Width: 180px;
Padding: 12px 10px 12px 10px;
Margin-top:-40px;
}

. Arrow-top,. Arrow-bottom {width: 140px ;}

. Arrow-top. Wrap,
. Arrow-bottom. Wrap {
Width: 180px;
Padding: 12px 10px 12px 10px;
Margin-left:-40px;
}

Next, we will apply the above style to implement the bubble pop-up box:
1. When the arrow is above, the HTML code is as follows:

<Div class = "bubble-box arrow-top">
<Div class = "Wrap"> CSS bubble -- the arrow is above </div>
</Div>

2. When the arrow is on the right side, the HTML code is as follows:

<Div class = "bubble-box arrow-Right">
<Div class = "Wrap"> CSS bubble -- the arrow is on the right </div>
</Div>

3. When the arrow is below, the HTML code is as follows:

<Div class = "bubble-box arrow-bottom">
<Div class = "Wrap"> CSS bubble -- the arrow is below </div>
</Div>

4. When the arrow is left, the HTML code is as follows:

<Div class = "bubble-box arrow-left">
<Div class = "Wrap"> CSS bubble -- the arrow is on the left </div>
</Div>

How about the code. I also asked how to use CSS code in the blog garden editor. I was going to make it an online demo, but the style won't be put in, just fine. So you have to do it yourself based on the provided code.

If you forget that you can upload the code, the instance code has been uploaded and can be downloaded (updated at:, January 1, November 13)

Download demo

========================================

If I can become a giant, I would like to give my shoulders
Just-opened bib:Http://weibo.com/sxwgfWelcome

========================================