Bubble Prompt box developed by pure CSS-----------only need one class_css

In fact, the principle is very simple, that is, befor is a small triangle has a color

After is a small triangle has no color

Use after to cover befor can

Don't say much, just go to the code.

1. This is the triangle on top.

. Tipbox{display:block;position:absolute;bottom: -36px;right:0px; width:66px;border-radius:3px;line-height:28px; text-align:center;font-size:12px; Color: #999; height:28px;  border:1px solid #eee;  Background-color: #FFF;
Tipbox:before,. tipbox:after{    content: "";  Display:block;  border-width:8px;  Position:absolute;  bottom:29px;
    left:39px;
    Border-style:dashed dashed dashed dashed;
    Border-color:transparent transparent #eee transparent;
    font-size:0;
    line-height:0; }
. tipbox:after{    bottom:28px;
    Border-color:transparent transparent #FFF transparent;
}

2. The triangle is next to the

HTML structure is the same as before: 1 2 3 4 5 6 < div class= "tag" > < div class= "Arrow" > < em ></em >< span ></span > </div > CSS Bubble box implementation </div >

The rectangle CSS style changes slightly: 1. tag{width:300px; height:100px;  position:relative; Background-color: #09F;}

Reposition the triangle arrow: 1. 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) 1. Arrow *{Display:block;  Position:absolute; Border-style:dashed solid solid dashed; font-size:0; line-height:0; }

First simulate a right triangle, the adjacent sides of an element of color set to the same value, the other two colors are set to transparent, you can get a right angle: 1. Arrow em{border-color:transparent #09F #09F transparent bo rder-width:30px 35px;}

By overlapping two triangles, you can get an irregular triangle. 1. Arrow span{border-width:20px 35px; border-color:transparent #FFF #FFF Transparent; bottom:0;}

At this point, the bubble box effect for the irregular triangular arrows has been implemented.

33 horns in the bottom.

<! DOCTYPE html>
 

The final effect is as follows: