jquery popup layer +css arrow made

Here, make a pop-up layer with arrows.

1, if the browser does not support CSS3, we can use border simulation. But this time the arrows can not have a border, that is, solid color, not very good, this time we could use two B tags to achieve:

First you need to make an upward arrow, the color of the arrows is the color of the pop-up layer border, other directions can be imitated.

. arrow-outer{width:0px;height:0px;display:block;border-bottom:10px solid #AFAFAF; border-left:10px Solid transparent;border-right:10px solid Transparent; /* Make up triangle */}

Then make a smaller arrow than it, the color of the arrows is the color of the body of the pop-up layer, covering the large arrows above.

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">The style is displayed as:


2, if the browser support CSS3, it is better to do, the arrows can be understood as a rectangular corner, this time you can define a div layer, rotate it to the specified position, here we rotate 45 degrees.
Then add a parent div layer to the div layer and hide it if it exceeds the div layer. The specific code is:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> 
The specific effect is:




jquery popup layer +css arrow made