Pure CSS to achieve all kinds of balloon bubble dialog box effect

Copy from http://www.zhangxinxu.com/wordpress/?p=651

Border method

Let's start by looking at the following style code:

. Test {width:10px; height:10px; border:10px solid; border-color:#ff3300 #0000ff #339966 #00ff00;}

What happens when a div applies the above style? See (Cut from Firefox3.5,ie browser with details on the difference):

Carefully observe the border color junction, Four Corners have 4 45° hypotenuse, the entire frame is divided into four isosceles trapezoid.

Now, imagine if we now only keep one of the top borders, the rest of the borders are transparent transparent (or the same color as the background color), then it is not just a red border above, we test, with the above similar code, just modify the remaining three border color.

. Test {width:10px; height:10px; border:10px solid; border-color:#ff3300 #ffffff #ffffff #ffffff;}

Results such as (truncated from Firefox3.5):

The results are visible as we expected. Now, think again, if the width and height of the above style are 0, it width:10px; height:10px; becomes width:0; height:0; . Yes, then the display will not be a isosceles trapezoid, but a isosceles right triangle. Do a simple test to know the answer, such as the following code:

. Test {width:0; height:0; border:10px solid; border-color:#ff3300 #ffffff #ffffff #ffffff;}

The results are as follows (still self-Firefox3.5):

At this point, we are surprised to find that the use of the Border property actually produced a isosceles right triangle, and this isosceles right triangle used as the sharp corner of the Bubble dialog box is more appropriate.

"Border method" to implement the Bubble dialog box demo

HTML code:

<class= "Org_box">    <class= "Org_bot_cor"></span>     border to achieve the bottom 90 degree sharp dialog box </  div>

CSS code:

. Org_box{Height:80px;Line-height:80px;Margin-bottom:30px;Padding-left:2em;background:#F3961C;position:relative; }. Org_bot_cor{width:0;Height:0;font-size:0;Border-width:15px;Border-style:Solid;Border-color:#f3961c Transparent Transparent;_border-color:#f3961c White;Overflow:Hidden;position:Absolute; Left:60px;Bottom:-30px;}

The effect is as follows:

It's not over yet, let's start our brains again, and imagine what would happen if the width of each border was inconsistent. Let's revise the test code to make the border width inconsistent, as follows:

. Test {width:0; height:0; border-width:20px 10px; Border-style:solid; border-color:#ff3300 #ffffff #ffffff #ffffff;}

The results are as follows:

It can be found that the sharp angle is pulled up, that is, the proportion of the adjacent border width will affect the height and low ratio of the individual border shape, it is not difficult to understand.

Now, let's start with our brains, what if we let the next two borders show color? Test it, the following code:

. Test {width:0; height:0; border-width:20px 10px; Border-style:solid; border-color:#ff3300 #ff3300 #ffffff #ffffff;}

Results such as:

This is not much to say, we all see, the last adjacent border sharp corner of the implementation of the Bubble dialog box effect bar.

Advanced application of "border method"

Said to be a high-level application, accurate should be "complex application". That means a combination of two tags (or no tags – using: Before and: After Pseudo Class) to form two different frames to display some of the effects of the implementation.

Look at the following two figures, this module is to achieve the following two kinds of effects:

1. Effect (1)
The CSS code is as follows:

. Test{width:300px;padding:30px 20px;Margin-left:60px;background:#beceeb;position:relative;}. Test span{width:0;Height:0;font-size:0;Overflow:Hidden;position:Absolute;}. Test Span.bot{Border-width:20px;Border-style:Solid;Border-color:#ffffff #beceeb #beceeb #ffffff; Left:-40px;Top:40px;}. Test Span.top{Border-width:10px 20px;Border-style:dashed solid solid dashed;Border-color:transparent #ffffff #ffffff transparent; Left:-40px;Top:60px;}

The HTML code is as follows:

<Divclass= "Test">    <spanclass= "Bot"></span>    <spanclass= "Top"></span>CSS "Border method" to implement the Bubble dialog box effect one</Div>

2. Effect (2)
The CSS code is as follows:

. Test{width:300px;padding:30px 20px;Border:5px Solid #beceeb;position:relative;}. Test span{width:0;Height:0;font-size:0;Overflow:Hidden;position:Absolute;}. Test Span.bot{Border-width:20px;Border-style:Solid Dashed dashed;Border-color:#beceeb Transparent Transparent; Left:80px;Bottom:-40px;}. Test Span.top{Border-width:20px;Border-style:Solid Dashed dashed;Border-color:#ffffff Transparent Transparent; Left:80px;Bottom:-33px;}

The HTML code is as follows:

<Divclass= "Test">    <spanclass= "Bot"></span>    <spanclass= "Top"></span>CSS "Border method" to achieve the Bubble dialog box effect two</Div>

3. Brief introduction of Effect principle
The key word of the principle is "overlay", the other border formed by the sharp corner of the previous one, as long as the control of the location of the cover, and then formed the actual irregular sharp angle or sharp border. You can also use your creativity to achieve additional results.

Some notes on "border law"

With regard to "border law", there is some knowledge that must be mentioned.

1. IE6 of odd and even bugs
If you position the outer frame height or the width is odd, then IE6, the low and right positioning of the absolute positioning element will have a 1 pixel error. Therefore, try to ensure that the height or width of the outer frame is even value.

2. IE6 empty div inexplicable height bug
IE6, empty div will have inexplicable height, that is to say height:0, not to do, at this time the sharp angle of the actual accounted for higher than other browsers are different. can use font-size:0; + overflow:hidden; fix the problem.

3. IE6 does not support solid border transparent transparent properties
IE6 does not support the solid border transparent transparent property, when a border is set to the transparent property and has a width, then transparency is displayed in the default black. There are two solutions, one is the need to hide the color set to the background color, so as with the transparency effect, this method has limitations, in the complex "border method" application is not feasible, the second is to use dashed instead of solid, you can achieve IE6 under the border transparent transparent.

Pure CSS to achieve all kinds of balloon bubble dialog box effect